Bootstrap accordion prevent collapse on postback in asp.net

Question

I have a bootstrap accordion where i try to reopen the last opened pane on a postback as in if someone clicks a save button on my page. I found this solution: Retain Twitter

Answer 1

In general, whenever you want to retain a value after postback in ASP.NET there is a common approach.

Store the value in an ASP.NET hidden field. In your case store the value of following active variable in a hiddren field.

 var active = $("#applicant-accordion .in").attr('id');

After post back due to the view state maintained by the ASP.NET, the hidden field will retain the value. You can then use this value at the page load to set the accordin.

$(document).ready(function () {
        var last = // Get value from the hidden field
        if (last != null) {
            // Set the accordin values.
        }
    });

Answer 2

Just to post my solution:

Added a hiddenfield:

<asp:HiddenField ID="hfAccordionIndex" runat="server" />

And the JavaScript at the bottom of the page to make sure the DOM has the elements:

<script type="text/javascript">
    $(document).ready(function () {
        var last = $('#<%= hfAccordionIndex.ClientID %>').val();
        if (last != null && last != "") {
            //remove default collapse settings
            $("#applicant-accordion .collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).collapse("show");
        }
    });

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $('#<%= hfAccordionIndex.ClientID %>').val(active);
    });
</script>

Answer 3

**Updated code for make accordion run able with current tab active. **

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Header 1 </a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">Content 1</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Header 2 </a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">Content 2</div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Header 3 </a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">Content 3</div>
    </div>
  </div>

  <div class="form-group">
    <hr />
    <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
    <asp:HiddenField ID="PaneName" runat="server" />
  </div>
</div>


<script type="text/javascript">
  $(function() {
    var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapseOne";
    $("#accordion .collapse").removeClass("in");
    $("#" + paneName).addClass("in");
    $(".panel-heading a").click(function() {
      $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
    });
  });

</script>