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.Keep Bootstrap Accordion Tab Active after PostBack inside Update Panel in ASP.Net<blockquote><cite>RitwikSaha says:</cite> <div class="line number104 index103 alt1"><code class="csharp plain">&lt;script type=</code><code class="csharp string">"text/javascript"</code><code class="csharp plain">&gt;</code></div> <div class="line number105 index104 alt2"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp plain">$(function () {</code></div> <div class="line number106 index105 alt1"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp plain">var paneName = $(</code><code class="csharp string">"[id*=PaneName]"</code><code class="csharp plain">).val() != </code><code class="csharp string">""</code> <code class="csharp plain">? $(</code><code class="csharp string">"[id*=PaneName]"</code><code class="csharp plain">).val() : </code><code class="csharp string">"collapseOne"</code><code class="csharp plain">;</code></div> <div class="line number107 index106 alt2">&nbsp;</div> <div class="line number108 index107 alt1"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp comments">//Remove the previous selected Pane.</code></div> <div class="line number109 index108 alt2"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp plain">$(</code><code class="csharp string">"#accordion .in"</code><code class="csharp plain">).removeClass(</code><code class="csharp string">"in"</code><code class="csharp plain">);</code></div> <div class="line number110 index109 alt1">&nbsp;</div> <div class="line number111 index110 alt2"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp comments">//Set the selected Pane.</code></div> <div class="line number112 index111 alt1"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp plain">$(</code><code class="csharp string">"#"</code> <code class="csharp plain">+ paneName).collapse(</code><code class="csharp string">"show"</code><code class="csharp plain">);</code></div> <div class="line number113 index112 alt2">&nbsp;</div> <div class="line number114 index113 alt1"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp comments">//When Pane is clicked, save the ID to the Hidden Field.</code></div> <div class="line number115 index114 alt2"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp plain">$(</code><code class="csharp string">".panel-heading a"</code><code class="csharp plain">).click(function () {</code></div> <div class="line number116 index115 alt1"><code class="csharp spaces">&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;</code><code class="csharp plain">$(</code><code class="csharp string">"[id*=PaneName]"</code><code class="csharp plain">).val($(</code><code class="csharp keyword">this</code><code class="csharp plain">).attr(</code><code class="csharp string">"href"</code><code class="csharp plain">).replace(</code><code class="csharp string">"#"</code><code class="csharp plain">, </code><code class="csharp string">""</code><code class="csharp plain">));</code></div> <div class="line number117 index116 alt2"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp plain">});</code></div> <div class="line number118 index117 alt1"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp plain">});</code></div> <div class="line number119 index118 alt2"><code class="csharp spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="csharp plain">&lt;/script&gt;</code></div> </blockquote> <p>&nbsp;Change the above with the below.</p> <pre class="brush: js">&lt;script type=&#34;text/javascript&#34;&gt; $(function () { SetTabs(); }); var prm = Sys.WebForms.PageRequestManager.getInstance(); if (prm != null) { prm.add_endRequest(function (sender, e) { if (sender._postBackSettings.panelsToUpdate != null) { SetTabs(); } }); }; function SetTabs() { var paneName = $(&#34;[id*=PaneName]&#34;).val() != &#34;&#34; ? $(&#34;[id*=PaneName]&#34;).val() : &#34;collapseOne&#34;; //Remove the previous selected Pane. $(&#34;#accordion .in&#34;).removeClass(&#34;in&#34;); //Set the selected Pane. $(&#34;#&#34; + paneName).collapse(&#34;show&#34;); //When Pane is clicked, save the ID to the Hidden Field. $(&#34;.panel-heading a&#34;).click(function () { $(&#34;[id*=PaneName]&#34;).val($(this).attr(&#34;href&#34;).replace(&#34;#&#34;, &#34;&#34;)); }); } &lt;/script&gt;</pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/195814/Keep-Bootstrap-Accordion-Tab-Active-after-PostBack-inside-Update-Panel-in-ASPNet/https://www.aspforums.net:443/Threads/195814/Keep-Bootstrap-Accordion-Tab-Active-after-PostBack-inside-Update-Panel-in-ASPNet/Thu, 29 Nov 2018 05:39:57 GMT