Jquery UI Accordion menu saving menu state even after refresh

Question

I have jquery UI Accordion menu. On click shows specific div element. I wonder if I refresh page when for example div3 is active(visible), how can I make div3 active again after reload of the page? I am trying to solve this with cookies but no luck. Is there any demo that anyone known of?

Thanks.

How about posting the code you've tried or an example on jsfiddle.net? — j08691, Jun 27 '12 at 17:05

score 6 · Accepted Answer · answered Jun 27 '12 at 18:46

6

Here is the code which first save selected accordion state and then activate that state on page reload or even on next visit as long as cookie remains.

        jQuery(document).ready(function(){
            var act = 0;
            $( "#accordion" ).accordion({
                create: function(event, ui) {
                    //get index in cookie on accordion create event
                    if($.cookie('saved_index') != null){
                       act =  parseInt($.cookie('saved_index'));
                    }
                },
                change: function(event, ui) {
                    //set cookie for current index on change event
                    $.cookie('saved_index', null);
                    $.cookie('saved_index', ui.options.active);
                },
                active:parseInt($.cookie('saved_index'))
            });
        });

I have used jquery cookie plugin, you can download it from here https://github.com/carhartl/jquery-cookie/

answered Jun 27 '12 at 18:46

Mudasser

315
3
10

1

please find the sample code here http://jsfiddle.net/wJmtY/ . i am getting error $.cookie is not a function when i use above code with cookie script including after the jquery external scripts .My idea is to save the menu state even after refresh. i have App Menu1 and App Menu2. if i click on App Menu2 i get all the below list of links. if i click the link the complete menu gets refreshed and as per my present code i am getting the App Menu1 as Active( Where App Menu2 should be opened). Please let me know if i am not clear. i was trying to fix this with cookies from past 1 week. – Bhas Jul 01 '12 at 05:37
I have made another jsfiddle for you at http://jsfiddle.net/mudasser/77xC9/6/ which includes cookie script in header section as well. might this can help. – Mudasser Jul 02 '12 at 10:00
Thanks a lot Mudasser, its working. I had some other problem, once i load the menu i am also loading the content page which has jquery external scripts ,i missed on including the Jquery cookie js plugin there also thats where i was facing issues. Now Solved – Bhas Jul 02 '12 at 16:25
1

Warning: with Jquery UI 1.9+ the change event is not available. See another solution below or see http://stackoverflow.com/questions/11570734/jquery-ui-accordion-cookies-closed-by-default – Gianpiero Sep 19 '13 at 15:24
Why do you need a `$.cookie('saved_index', null);` line? – Filip Spiridonov Sep 26 '14 at 14:36
hey there @Mudasser do you have any idea how can I apply something similar in my situation please? thanks http://stackoverflow.com/q/32687806/4642215 – typo_ Sep 25 '15 at 08:23

score 5 · Answer 2 · edited Sep 26 '14 at 11:15

With new 1.10.1 UI

$(function () {
    var icons = {
        header: "ui-icon-triangle-1-e",
        activeHeader: "ui-icon-triangle-1-s",
        headerSelected: "ui-icon-triangle-1-s"
    };
    var act = 0;
    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true,
        clearStyle: true,
        heightStyle: "content",
        autoHeight: false,
        create: function(event, ui) {
            //get index in cookie on accordion create event
            if($.cookie('saved_index') != null){
               act =  parseInt($.cookie('saved_index'));
            }
        },
        activate: function(event, ui) {
            //set cookie for current index on change event
            var active = jQuery("#accordion").accordion('option', 'active');
            $.cookie('saved_index', null);
            $.cookie('saved_index', active);
        },
        active:parseInt($.cookie('saved_index'))
    });
    $( "#toggle" ).button().toggle(function() {
        $( "#accordion" ).accordion( "option", "icons", false );
    },
    function() {
        $( "#accordion" ).accordion( "option", "icons", icons );
    });
});

score 3 · Answer 3 · answered Sep 26 '14 at 10:36

I didn't want to use cookies or session variables. I have chosen HTML5's Local Storage.

This is my solution:

$("#accordion").accordion({    
    //set localStorage for current index on activate event
    activate: function(event, ui) {        
        localStorage.setItem("accIndex", $(this).accordion("option", "active"));
    },
    active: parseInt(localStorage.getItem("accIndex"))    
});

score 1 · Answer 4 · answered Oct 08 '12 at 08:03

Just a small enhancement to the solution above to manage an accordion having all the entry closed (active: false):

$(function () {
    var myact = false;
    $( "#myaccordion" ).accordion({
        clearStyle: true,
        collapsible: true,      // allow to close completely
        create: function (event, ui) {
            //get index in cookie on accordion create event
            if (($.cookie('saved_index') != null) && ($.cookie('saved_index') != 'false')) {
                myact = parseInt($.cookie('saved_index'));
            }
        },
        change: function (event, ui) {
            //set cookie for current index on change event
            myact = ui.options.active;
            $.cookie('saved_index', null, { expires: 2, path: '/' });   // session cookie
            $.cookie('saved_index', myact, { expires: 2, path: '/' });
        },
        active: ($.cookie('saved_index') == null) ? 0 : ($.cookie('saved_index') == 'false') ? false : parseInt($.cookie('saved_index'))
    });
});

score 1 · Answer 5 · answered Dec 04 '12 at 14:11

1

The chosen solution didn't work for me (jQuery 1.8.2, jQuery-UI 1.9.1).

I modified it as in the following snippet:

jQuery(document).ready(function(){
    $( "#accordion" ).accordion({
        change: function(event, ui) {
            //set cookie for current index on change event
            $.cookie('saved_index', null);
            $.cookie('saved_index', $( "#accordion" )
                    .accordion( "option", "active" ));
        },
        active:parseInt($.cookie('saved_index'))
    });
});

answered Dec 04 '12 at 14:11

Federico Bellucci

623
2
7
26

Why do you need a `$.cookie('saved_index', null);` line? – Filip Spiridonov Sep 19 '14 at 13:02
I don't know Filip. It was in the code of the accepted answer and it was written *2 years ago*! Ask Mudasser if you need further explanations – Federico Bellucci Sep 25 '14 at 20:08

score 0 · Answer 6 · answered Sep 15 '17 at 10:29

@DeM solution worked for me, but I keept on getting this error.

cannot call methods on accordion prior to initialization; attempted to call method 'option'

The following modifications worked for me:

$("#accordion").accordion({    
    //set localStorage for current index on activate event
    activate: function(event, ui) {  
        //Find the index of the header. This can be the class|element you specify in the "header" init argument.
        var index =  $(this).find("h3").index(ui.newHeader[0]);
        localStorage.setItem("accIndex", index);
    },
    // "|| 0" is used to activate first by default
    active: parseInt(localStorage.getItem("accIndex")) || 0   
});

Jquery UI Accordion menu saving menu state even after refresh

6 Answers6

Linked