javascript - Bootstrap accordion prevent collapse on postback in asp.net

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 Bootstrap Collapse state on Page refresh/Navigation

but am unable to ment on it since i don't have enough points as a user.

For some reason i can't make the function work:

//when a group is shown, save it as the active accordion group
$("#applicant-accordion").bind('shown', function () {
    var active = $("#applicant-accordion .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

I'm trying to test it in FireBug but I never get to the line with var active. It stops at the line with $("#applicant-accordion).bind. I've tried changing the .bind to .on since my jQuery is version 1.7.2

I'm at a loss and i hope you can guide me towards a solution. I am building it in ASP.NET.

<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap/js/bootstrap.js" type="text/javascript" />
<link href="../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src=".cookie.js" />

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

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $.cookie('activeAccordionGroup', active)
    });

</script>

    <div class="accordion" id="applicant-accordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#uInfo">Applicant information</a>
            </div>
            <div id="uInfo" class="accordion-body collapse in">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <asp:Panel Visible="false" runat="server" ID="assistancePanel">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#meetgreet">Acmodation and Meet & Greet information</a>
                </div>
                <div id="meetgreet" class="accordion-body collapse">
                    <div class="accordion-inner">
                    </div>
                </div>
            </div>
        </asp:Panel>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#application">Application, documents & options</a>
            </div>
            <div id="application" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#ments">Comments</a>
            </div>
            <div id="ments" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#changelog">Changelog</a>
            </div>
            <div id="changelog" class="accordion-body collapse">
                <div class="accordion-inner" runat="server" id="changelogItems">
                </div>
            </div>
        </div>
    </div>

but am unable to ment on it since i don't have enough points as a user.

For some reason i can't make the function work:

//when a group is shown, save it as the active accordion group
$("#applicant-accordion").bind('shown', function () {
    var active = $("#applicant-accordion .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

I'm at a loss and i hope you can guide me towards a solution. I am building it in ASP.NET.

<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap/js/bootstrap.js" type="text/javascript" />
<link href="../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://raw.github./carhartl/jquery-cookie/master/jquery.cookie.js" />

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

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $.cookie('activeAccordionGroup', active)
    });

</script>

    <div class="accordion" id="applicant-accordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#uInfo">Applicant information</a>
            </div>
            <div id="uInfo" class="accordion-body collapse in">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <asp:Panel Visible="false" runat="server" ID="assistancePanel">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#meetgreet">Acmodation and Meet & Greet information</a>
                </div>
                <div id="meetgreet" class="accordion-body collapse">
                    <div class="accordion-inner">
                    </div>
                </div>
            </div>
        </asp:Panel>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#application">Application, documents & options</a>
            </div>
            <div id="application" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#ments">Comments</a>
            </div>
            <div id="ments" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#changelog">Changelog</a>
            </div>
            <div id="changelog" class="accordion-body collapse">
                <div class="accordion-inner" runat="server" id="changelogItems">
                </div>
            </div>
        </div>
    </div>

Share Improve this question edited May 23, 2017 at 10:30 CommunityBot 11 silver badge asked Jul 3, 2014 at 11:35 Ghost 3231 gold badge2 silver badges15 bronze badges

Hi, you can check my answer at: stackoverflow./questions/12733238/… . I was also facing the same issue. – Ravimallya Commented Aug 12, 2014 at 7:21

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

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>

In general, whenever you want to retain a value after postback in ASP.NET there is a mon 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.
        }
    });

**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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap accordion prevent collapse on postback in asp.net - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)