ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Collapse Expand Bootstrap panel inside ListView using jQuery in ASP.Net<p>Hi <a class="username" rel="nauna">nauna</a>,</p> <p>Please refer below sample.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34;&gt; $(function () { $(&#39;[id*=lnk]&#39;).on(&#39;click&#39;, function () { var id = $(this).next(&#39;div&#39;).find(&#39;[id*=HiddenField2]&#39;).val(); if ($(this).next(&#39;div&#39;).attr(&#39;class&#39;) == &#34;collapse in&#34;) { $(this).next(&#39;div&#39;).removeClass(&#39;collapse in&#39;); $(this).next(&#39;div&#39;).addClass(&#39;collapse out&#39;); } else { $(this).next(&#39;div&#39;).removeClass(&#39;collapse out&#39;); $(this).next(&#39;div&#39;).addClass(&#39;collapse in&#39;); } var oldURL = window.location.protocol + &#34;//&#34; + window.location.host + window.location.pathname; var newUrl = oldURL + &#34;?Id=&#34; + id; if (window.history != &#39;undefined&#39; &amp;&amp; window.history.pushState != &#39;undefined&#39;) { window.history.pushState({ path: newUrl }, &#39;&#39;, newUrl); $(&#34;#&lt;%=HiddenField1.ClientID %&gt;&#34;).val(id); } return false; }); }); &lt;/script&gt; &lt;div&gt; &lt;asp:HiddenField ID=&#34;HiddenField1&#34; runat=&#34;server&#34; /&gt; &lt;asp:ListView ID=&#34;lvCustomers&#34; runat=&#34;server&#34; GroupPlaceholderID=&#34;groupPlaceHolder1&#34; ItemPlaceholderID=&#34;itemPlaceHolder1&#34;&gt; &lt;LayoutTemplate&gt; &lt;table cellpadding=&#34;0&#34; cellspacing=&#34;0&#34;&gt; &lt;asp:PlaceHolder runat=&#34;server&#34; ID=&#34;groupPlaceHolder1&#34;&gt;&lt;/asp:PlaceHolder&gt; &lt;/table&gt; &lt;/LayoutTemplate&gt; &lt;GroupTemplate&gt; &lt;tr&gt; &lt;asp:PlaceHolder runat=&#34;server&#34; ID=&#34;itemPlaceHolder1&#34;&gt;&lt;/asp:PlaceHolder&gt; &lt;/tr&gt; &lt;/GroupTemplate&gt; &lt;ItemTemplate&gt; &lt;a class=&#34;btn btn-primary&#34; role=&#34;button&#34; id=&#34;lnk&#34; data-toggle=&#34;collapse&#34; href=&#34;#collapseExample&lt;%#Container.DataItemIndex%&gt;&#34; aria-expanded=&#34;false&#34; aria-controls=&#34;collapseExample&#34;&gt;CustomerId &lt;/a&gt; &lt;div class=&#34;collapse in&#34; id=&#34;#collapseExample&lt;%#Container.DataItemIndex%&gt;&#34;&gt; &lt;asp:Label ID=&#34;lblId&#34; runat=&#34;server&#34; Text=&#39;&lt;%# Eval(&#34;Name&#34;) %&gt;&#39;&gt;&lt;/asp:Label&gt; &lt;asp:HiddenField ID=&#34;HiddenField2&#34; runat=&#34;server&#34; Value=&#39;&lt;%# Eval(&#34;CustomerId&#34;) %&gt;&#39; /&gt; &lt;/div&gt; &lt;/ItemTemplate&gt; &lt;/asp:ListView&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;"><strong>Namespaces</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Configuration; using System.Data; using System.Data.SqlClient;</pre> <p><span style="text-decoration: underline;"><strong>Code</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { &nbsp;&nbsp;&nbsp; if (!this.IsPostBack) &nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; using (SqlCommand cmd = new SqlCommand("SELECT CustomerId,Name FROM Customers", con)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; using (SqlDataAdapter da = new SqlDataAdapter(cmd)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; DataTable dt = new DataTable(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; da.Fill(dt); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; lvCustomers.DataSource = dt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; lvCustomers.DataBind(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; } }</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><img src="https://imgur.com/YpAgHTN.gif" alt="" width="335" height="293" /></p>https://www.aspforums.net:443/Threads/151482/Collapse-Expand-Bootstrap-panel-inside-ListView-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/151482/Collapse-Expand-Bootstrap-panel-inside-ListView-using-jQuery-in-ASPNet/Tue, 09 Oct 2018 00:06:20 GMT