show/hide a div tag based on the # of items in repeater controlRSS

• • Reply
  inkaln

  Member

  88 Points

  365 Posts

  show/hide a div tag based on the # of items in repeater control

  Sep 06, 2019 05:55 PM|inkaln|LINK

  Hi,

  I have a repeater where I want to show the first three items bound to it....and IF there are more than 3 items then display the "View More" text which will show the rest.  This is working; however, the "View More" shows even if there are no more than three tags.  Here's the code...I just want to make sure the "View More" text is hidden if there are no more than three items...

  <HeaderTemplate>
  <ul>
  </HeaderTemplate>

  <ItemTemplate>
  <div class='<%# (Container.ItemIndex < 3 ? "show" : "hide") %>'>
  <li>
  <asp:Label ID="lblParent" runat="server"></asp:Label>
  <div>
  <b>
  <asp:Label ID="lblChild" runat="server"></asp:Label>
  </b>
  </div>
  
  </li>
  </div>
  </ItemTemplate>
  <FooterTemplate>
  <div id="viewMore" style="text-align:right;">
  View More</div>
  </ul>
  </FooterTemplate>

  <script type="text/javascript">
  $("#viewMore").click(function () {
  $(".hide").removeClass("hide").addClass("show");
  $("#viewMore").hide();
  });
  
  </script>

  <style type="text/css">

  .show
  {
  /*border: 1px solid black;*/
  
  display: block;
  }
  .hide
  {
  display: none;
  }
  </style>

• • Reply
  yogyogi

  Participant

  1010 Points

  709 Posts

  Re: show/hide a div tag based on the # of items in repeater control

  Sep 09, 2019 04:41 AM|yogyogi|LINK

  When you are binding the repeater then you can simply add a parent div with style="display:none" to the divs of the 4th, 5th, 6th, records.

  <div id="containerDiv" style="display:none">
    <div>4 th record</div>
    <div>5 th record</div>
    <div>6 th record</div>
    ....
  </div>

  So these divs will be hidden.

  Now to do the show hiding part you apply jQuery Toggle method to do so:

  $( "#containerDiv" ).click(function() {
    $(this).toggle();
  });

  Thanks & Regards..

  Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
  ♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
• • Reply
  samwu

  Participant

  1140 Points

  417 Posts

  Re: show/hide a div tag based on the # of items in repeater control

  Sep 09, 2019 06:33 AM|samwu|LINK

  Hi inkaln,

  You can use the hasClass() method to judge the name of a class in the div , then decide whether to hide "View More" based on the name of the class.

  The code:

  <style>
          .show {
              /*border: 1px solid black;*/
              display: block;
          }
  
          .hide {
              display: none;
          }
      </style>
  <asp:Repeater ID="Repeater1" runat="server">
                  <HeaderTemplate>
                      <ul>
                  </HeaderTemplate>
  
                  <ItemTemplate>
                      <div class='<%# (Container.ItemIndex < 3 ? "show" : "hide") %>' id="div1">
                          <li>
                              <asp:Label ID="lblParent" runat="server"></asp:Label>
                              <div>
                                  <b>
                                      <asp:Label ID="lblChild" runat="server"></asp:Label>
                                  </b>
                              </div>
  
                          </li>
                      </div>
                  </ItemTemplate>
                  <FooterTemplate>
                      <div id="viewMore" style="text-align: right;">
                          View More
                      </div>
                      </ul>
                  </FooterTemplate>
              </asp:Repeater>
              <script src="../Scripts/jquery-3.3.1.js"></script>
              <script>
                  $(document).ready(function () {
                      if ($("#div1").hasClass("show") == true) {                     
                          $("#viewMore").addClass("hide")
                      }
                      
                      $("#viewMore").click(function () {
                          $(".hide").removeClass("hide").addClass("show");
                          $("#viewMore").hide();
                      });
                  });
              </script>
  

  Best regards,

  Sam

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.