Keep JQuery accordion open after refresh

问题

I made an asp.net web site in which i put a jquery accordion. My Problem is that after a postback or a refresh, the current accordion pane closes and the page resets every things. This is my jQuery code :

jQuery(document).ready(function () {
    function close_accordion_section() {
        jQuery('.button').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }
    jQuery('.button').click(function (e) {
        var currentAttrValue = jQuery(this).attr('href'); 
        if (jQuery(e.target).is('.active')) {
            close_accordion_section();
        }
        else {
            close_accordion_section();
            jQuery(this).addClass('active');
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
            document.getElementById('.accordion ' + currentAttrValue).scrollIntoView();

        }
        e.preventDefault();
    });
});

What can i do to keep my accordion pane opened after a postback or refresh ? Thanks in Advance

回答1:

The problem you are facing is because after postback asp.net refreshes the whole page. Solutions for that would be:

1. Use UpdatePanel for the places you want to update http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel(v=vs.110).aspx that will prevent the PostBack from refreshing your page
2. Include information in the postback which accordion is currently open and open it
   • either from asp.net backend
   • or from javascript with ClientScriptManager.RegisterStartupScript(this.GetType(), "AKey", "MyFunction('paramToOpenTab');", true);

回答2:

Thanks it workes with UpdatePanel; This is the solution :

 <div id="accordion-1" class="accordion-section-content">
                 <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>
                 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                 <ContentTemplate>
                <table style="width:100%; height: 600px;" border="1">
                <tr>
                <td></td>
                <td><asp:Button ID="btnChercher" runat="server" Text="Chercher" onclick="btn_Chercher"></asp:Button></td>
                </tr>
            <tr>
                <td>
                 Test 1</td>
                <td>
                     <asp:Chart ID="ChartDate" runat=server>
                  <Legends>
                <asp:Legend Alignment="Center" Docking="Top" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />
            </Legends>
                  <Series>
                  <asp:Series Name="Nombre documents"></asp:Series>
                  </Series>
                  <ChartAreas><asp:ChartArea Name="ChartArea1"></asp:ChartArea></ChartAreas>
                  </asp:Chart></td>
            </tr>
            <tr>
                <td>
                    Test 3</td>
                <td>
                     <asp:Chart ID="ChartEtat" runat=server>
                  <Legends>
                <asp:Legend Alignment="Center" Docking="Top" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />
            </Legends>
                  <Series>
                  <asp:Series Name="Etat"></asp:Series>
                  </Series>
                  <ChartAreas><asp:ChartArea Name="ChartAreaHlm"></asp:ChartArea></ChartAreas>
                  </asp:Chart></td>
            </tr>
            <tr>
                <td>
                    Test 5</td>
                <td>
                     <asp:Chart ID="ChartFormulaire" runat=server>
                  <Legends>
                <asp:Legend Alignment="Center" Docking="Top" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />
            </Legends>
                  <Series>
                  <asp:Series Name="Formulaire"></asp:Series>
                  </Series>
                  <ChartAreas><asp:ChartArea Name="ChartAreaFormulaire"></asp:ChartArea></ChartAreas>
                  </asp:Chart></td>
            </tr>
        </table>
        </ContentTemplate>
        </asp:UpdatePanel>
                </div> 

Thank you n0mercy

来源：https://stackoverflow.com/questions/26337871/keep-jquery-accordion-open-after-refresh