I have a form that use this collapse.js to show/hide fieldsets with toggle(). Those who are familiar with Django will recognize this function because its exactly the one used in django admin. Now, I would like to persist the show/hide fieldsets state when the form is submitted and the page reloaded. According to this question, this can be achieve with a window.localStorage. How should I modify collapse.js to achieve this?


(function($) {
    $(document).ready(function() {
    // Add anchor tag for Show/Hide link
        $("fieldset.collapse").each(function(i, elem) {
        // Don't hide if fields in this fieldset have errors
            if ($(elem).find("div.errors").length == 0) {
                $(elem).addClass("collapsed").find("h2").first().append(' (<a id="fieldsetcollapser' +
                    i +'" class="collapse-toggle" href="#">' + gettext("Show") +
        // Add toggle to anchor tag
        $("fieldset.collapse a.collapse-toggle").toggle(
            function() { // Show
                $(this).text(gettext("Hide")).closest("fieldset").removeClass("collapsed").trigger("show.fieldset", [$(this).attr("id")]);
                return false;

            function() { // Hide
                $(this).text(gettext("Show")).closest("fieldset").addClass("collapsed").trigger("hide.fieldset", [$(this).attr("id")]);
                return false;