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...
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 ♠
.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.
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>
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.
So these divs will be hidden.
Now to do the show hiding part you apply jQuery Toggle method to do so:
Thanks & Regards..
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
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:
Best regards,
Sam