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

  • Question

  • User-153404742 posted

    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>

    Friday, September 6, 2019 5:55 PM

Answers

  • User288213138 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 9, 2019 6:33 AM

All replies

  • User-2054057000 posted

    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..

    Monday, September 9, 2019 4:41 AM
  • User288213138 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 9, 2019 6:33 AM