show/hide a div tag based on the # of items in repeater control[Answered] RSS

• • Reply
  inkaln

  Member

  95 Points

  427 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

  1253 Points

  935 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

  Contributor

  3370 Points

  1409 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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.