Save Pane States

Building on the Quick Start example, you can use jquery.cookie.js to save a cookie containing an array of all open panes, and then use the cookie to set the state of each pane upon reloading the page.

Note: Cookies require a server in order to function, so if you try this on your local machine, you must create a site in your favorite web server, for example, IIS, to host your HTML page.

From GitHub, download jquery-cookie, and save the jquery.cookie.js file to the same directory as your HTML file.

In the <head> section of your HTML file, add the following script to your jQuery Referemnces section.

Reference	Copy Code
<script src="jquery.cookie.js" type="text/javascript"></script>

In the <head> section of your HTML file, add the following 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 and you can have multiple panes open at once.
Creates an array of all idices with an active (opened) state in the selectedIndexChanged event.
Passes the array of indices into a cookie.
Sets the selectedIndex option to -1 so that no pane is opened initially.
Uses the cookie to pass the array of indices back into wijaccordion to activate the same panes that were opened previously.

Pane State Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ header: "h2", requireOpenedPane: false, selectedIndexChanged: function (e, args) { var activeHeaders = $($.find("#accordion .wijmo-wijaccordion-header.ui-state-active")); var indices = ""; activeHeaders.each(function (i, o) { indices += $(o).index(".wijmo-wijaccordion-header") + ";"; }); $.cookie("the_cookie", indices); }, selectedIndex: -1 }); var indices = $.cookie("the_cookie"), i, k; if (indices) { indices = indices.split(";"); for (i = 0; i < indices.length; i++) { if (indices) { k = parseInt(indices[i]); if (isFinite(k)) { $("#accordion").wijaccordion("activate", k); } } } } }); </script>

Pane State Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").wijaccordion({
            header: "h2", 
            requireOpenedPane: false,
            selectedIndexChanged: function (e, args) {
                var activeHeaders = $($.find("#accordion 
                    .wijmo-wijaccordion-header.ui-state-active"));
                var indices = "";
                activeHeaders.each(function (i, o) {
                    indices += $(o).index(".wijmo-wijaccordion-header") + ";";
                });
                $.cookie("the_cookie", indices);
            },
            selectedIndex: -1
        });
        var indices = $.cookie("the_cookie"), i, k;
        if (indices) {
            indices = indices.split(";");
            for (i = 0; i < indices.length; i++) {
                if (indices) {
                    k = parseInt(indices[i]);
                    if (isFinite(k)) {
                        $("#accordion").wijaccordion("activate", k);
                    }
                }
            }
        }
    });
</script>

Save your HTML file and open it in a browser. The accordion initializes with all of the panes closed, and if you navigate away from it return or reload it, it reopens the same panes you had open last.

See Also

Reference

Widgets