Initialize with Multiple Panes Expanded

Building on the Quick Start example, you can change one option and add a method to initialize your accordion with multiple panes opened.

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 multiple panes can be open.
Sets the selectedIndex option to 0 to open the first pane.
Calls the activate method to open the fifth pane.

Multiple Panes Expanded Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ header: "h2", expandDirection: "right", selectedIndex: 0, requireOpenedPane: false, }); $("#accordion").wijaccordion("activate", 4); }); </script>

Multiple Panes Expanded Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").wijaccordion({
            header: "h2", 
            expandDirection: "right",
            selectedIndex: 0,
            requireOpenedPane: false,
        });
        $("#accordion").wijaccordion("activate", 4);
    });
</script>

Save your HTML file and open it in a browser. The accordion initializes with the two selected panes expanded.

Reference

activate Method

expandDirection Field

selectedIndex Field

requireOpenedPane Field

header Field

Widgets

Accordion Quick Start

Product Support Forum | Print this page