Bootstrap accordion prevent collapse on postback in asp.net

Description:

In this example we explain that how to prevent bootstrap collapse toggle after postback in asp.net. or jQuery toggle disappearing after postback on button click event. Or how to maintain bootstrap accordion current pane state after postback in asp.net using JavaScript. Or how to retain bootstrap collapse state on page refresh/Navigation using jQuery. Or bootstrap accordion prevent collapse on postback in asp.net.

In general, we used HiddenField to store the value of the accordion toggle when postback and then again set HiddenField value to accordion toggle.

Code:

First store the value on click on button event to an hidden field like below one line

  $('#<%= hfAccordionIndex.ClientID %>').val(($("#collapseExample").attr('class')));

After on page load again set the last value of the accordion toggle that we stored in HiddenField.

  $(document).ready(function () {

            // $("#collapseExample").collapse("hide");

            if ($('#<%= hfAccordionIndex.ClientID %>').val() != undefined && $('#<%= hfAccordionIndex.ClientID %>').val() != "") {

               // debugger;

                if ($('#<%= hfAccordionIndex.ClientID %>').val() == "x_panel collapse in")

                    $("#collapseExample").collapse("show");

                else

                    $("#collapseExample").collapse("hide");

            }

});