Create Bootstrap Accordion programmatically

Question

I have a Bootstrap Accordion inside an UpdatePanel. When the page PostBack, the Accordion is lost and not functioning as expected. I suspect it is because of the partial postback that recreates the Accordion elements.

I need to know how to create the Accordion by Javascript?

Answer 1

But if a post-back is collapsing the according, then how would creating one via code make any difference?

I mean, you can add code to "save" the users selection.

        <asp:Button ID="Button1" runat="server" Text="Post back button" />

        <div id="accordion" style="width:40%">
            <h3>Section 1</h3>
            <div>
                <p>
                    This is text of section 1.
                </p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>
                    this is text of section 2
                </p>
            </div>
            <h3>Section 3</h3>
            <div>
                                    <p>
                    this is text of section 3
                </p>

                <ul>
                    <li>List item one</li>
                    <li>List item two</li>
                    <li>List item three</li>
                </ul>
            </div>
            <h3>Section 4</h3>
            <div>
                <p>
                    this is text of section 4
                </p>
            </div>
        </div>

    </div>



    <asp:HiddenField ID="ActivePanel" runat="server" ClientIDMode="Static" Value="0" />

    <script>


        //bind('accordionchange',
        //    function () {
        //        alert('Active tab index: ' + $(this).accordion('option', 'active'))
        //    });

        $(function () {
             SaveActive = $("#ActivePanel")
             WhichActive = parseInt(SaveActive.val())
             myacc = $("#accordion").accordion()
            myacc.accordion("option", "active", WhichActive);

            myacc.accordion("option", "event", "click").click(
                function () {
                    SaveActive.val(myacc.accordion("option", "active"))
                })
        });
    </script>

so, above has a button (post back).

But, note how we "save" the click selection into a hidden field.

That way the value persists.

Even better, our button click event could for example show, open the 3rd value with the above setup.

so, so this:

        <asp:Button ID="Button1" runat="server" Text="Post back button"
            OnClick="Button1_Click"
            />

And code behind is this:

Protected Sub Button1_Click(sender As Object, e As EventArgs)

    ActivePanel.Value = 3 ' show 4th panel on click


End Sub

So, now when we click that button, we have a post-back and we set the panel

so, we see this:

So, note how we add a click event to the panel select, and SAVE that into a hidden field.

This not only allows code behind to get what panel is dropped (open), but it also means we can set the value of the hidden field, and the panel will open to that selection.

However, I fail to see how writing code would solve your problem, since if you added the accordion by code, YOU STILL will require code to persist (save) the current selection to survive post-backs.

so, better is just to setup a hidden field. the beauty of the above, is you have automatic setting and code behind at any time can get the current dropped section with:

 ActivePanel.Value

And to set the value then

ActivePanel.Value = 2

And since we "save" the current seleciton into that hidden field?

Well, if we don't touch or set ActivePanel, it will still work, and still remember the users current choice/setting - even with post-backs on the page.

You can introduce a update panel, but the above will work regardless as such anyway.