Accordion script does not work in ajax update panel

Question

I am having jquery accordion plugin which is inside ajax update panel in an aspx page. The accordion section consists of header h3 tag and content div tag, content area also having aspx button. When the page loads we can hide or show content area by clicking on accordion header. The problem occurs after i click on aspx button which is in content area that accordion show and hide function stops working.

Here is the sample code.

<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="upnlAccordion" runat="server" UpdateMode="Conditional" >            
            <ContentTemplate>
            <h3 class="acco_header">Header</h3>
                    <div class="acco_content">
                        Content Text
                        <asp:Button ID="btnClick" runat="server" Text="Click Button" />
                    </div>
            </ContentTemplate>
        </asp:UpdatePanel>

can you please show me your Jquery code for accordion? because of when you use Jquery plugin with update panel it;s always create problem for Jquery due partial postback. And Jquery ready function does not understand partial postback of update panel. — Naresh Pansuriya

Dan Dan · Accepted Answer · 2012-12-13T21:16:00

You can move the updatepanel into the content div, which will prevent the accordioned elements from being redrawn and losing their bindings. This is the simplest solution I know of, and is pretty foolproof when interacting with plugins.

Accordion script does not work in ajax update panel

1 Answers