Collapse All Panes

Building on the Quick Start example, you can create a function to collapse all open panes in the accordion.

Note: In addition to creating our function, we also need to change the requireOpenedPane option, which is set to true by default, because it prevents all of the panes from collapsing.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:

Sets the requireOpenedPane option to false so that all of the panes can close.
Calls a collapseAll function from the click event of a button with "collapseAll" for the id.
Creates a collapseAll function that calls the activate method on all headers in the active (expanded) state.

Collapse Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ header: "h2", expandDirection: "right", requireOpenedPane: false }); $("#collapseAll").click(function(){collapseAll();}); }); function collapseAll(){ var accordion = $("#accordion"); accordion.wijaccordion("activate", accordion.find(".wijmo-wijaccordion-header.ui-state-active")); } </script>

Collapse Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").wijaccordion({
        header: "h2", 
        expandDirection: "right",
        requireOpenedPane: false
        });
        $("#collapseAll").click(function(){collapseAll();});
    });
        function collapseAll(){
            var accordion = $("#accordion");
            accordion.wijaccordion("activate",                 accordion.find(".wijmo-wijaccordion-header.ui-state-active"));
        }
</script>

In the <body> section of your HTML file, after the final </div> tag of your Accordion, add the following markup to create a button with its id set to "collapseAll."
Button Markup
Copy Code
<button id = "collapseAll">Collapse All</button>
Save your HTML file and open it in a browser. The button appears below the accordion, and when you click it, all of the panes close.

Button Markup	Copy Code
<button id = "collapseAll">Collapse All</button>

Reference

activate Method

required Opened Pane

Widgets

Accordion Quick Start