Expand All Panes

Building on the Quick Start example, you can create a function to expand all closed 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. If you do not want to change this option to false, the script in the following section must be adjusted.

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 an expandAll function from the click event of a button with "expandAll" for the id.
Creates an expandAll function that calls the activate method on all headers in the default (collapsed) state.

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

Expand Script

Copy Code

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

Button Markup	Copy Code
<button id="expandAll">Expand 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 open.

See Also

Reference

Widgets