There are many times when a we all needs to Expand and Collapse text on a website. This feature is especially useful when it comes to setting up FAQs or creating quiz features.In this article, i am going to give complete overview on how to add Expand and Collapse feature in ASP.NET using JavaScript function.
aspx.cs page
aspx page
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function ExpandableDisplay(id) {
// 'd' was concatenated to get id of description text
var descelem = document.getElementById('d' + id);
if (descelem) {
if (descelem.style.display != 'block') {
descelem.style.display = 'block';
descelem.style.visibility = 'visible';
}
else {
descelem.style.display = 'none';
descelem.style.visibility = 'hidden';
}
}
}
</script>
<style type="text/css">
.header { font-size: larger; margin: 10px; font-weight: bold; cursor: pointer; background-color: #cccccc; font-family: Verdana; }
.description { display: none; margin: 15px; visibility: hidden; font-family: Verdana; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="repeaterItems" runat="server">
<ItemTemplate>
<%--'h' used for making it header text--%>
<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
onclick='ExpandableDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);'>
<b>Price: </b><%# DataBinder.Eval(Container.DataItem, "price") %><b> Rs.</b>
</div>
<%--'d' used for making it description text--%>
<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="description">
<b>Quantity Available:</b> <%# DataBinder.Eval(Container.DataItem, "quantity") %><br />
</div>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>
Expand and Collapse Output
That’s it!!…..Happy Programming...
http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=51
ReplyDeleteFor any project related question:- shyamsrinivas@gmail.com
ReplyDelete