the director. [ mike centola's blog ]

1. 

   drewho
   July 3rd, 2009 - 06:41

   cheers for this, saved my bacon

   you just need path: ‘/’ in the part that writes, or you end up with multiple cookies

   $.cookie(‘menustate’, hid, { path: ‘/’, expires: 2 });
2. 

   mikecentola
   July 3rd, 2009 - 15:09

   Thanks for the correction!
3. 

   Per Jensen
   August 13th, 2009 - 06:21

   Many thanks for sharing.

   The variable ‘hid’ never did get a value in my setup (Ubuntu 9.04 Firefox 3.013, jQuery 1.3.2, ui 1.7.2). I have tried different things. this works for me:

   jQuery(document).ready(function(){
   var drawer = jQuery.cookie(‘accdrawer’);
   if(drawer === undefined) {
   drawer = “0″;
   }

   jQuery(‘#accordion’).accordion({
   header: ‘h3′,
   navigation: false,
   active: parseInt(drawer),
   autoHeight: false,
   clearStyle: true,
   collapsibe: true,
   alwaysOpen: true,
   animated: ‘slide’,
   change: function(event,ui) {
   var index = jQuery(this).find(“h3″).index(ui.newHeader[0]);
   if (index > -1) {
   jQuery.cookie(“accdrawer”, index, {path: “/”});
   }
   }
   }
   );
   });
4. 

   Roman
   August 18th, 2009 - 06:31

   Example of this working would be really nice, since I just can’t make it work
5. 

   mikecentola
   August 20th, 2009 - 15:32

   I know I know! It’s coming soon. I swear!
6. 

   Taeke
   August 27th, 2009 - 17:09

   Thanks Per Jensen,

   I didn’t get the cookie thing to work but your solution works like a charm
7. 

   Help Seeker
   September 27th, 2009 - 16:14

   Per Jensesn,
   Thanks for your suggstion. It seems to e working for un-nested accordions, but for nested I’m having trouble as is collapses all as soon as I click on the sub-accordion. Here’s my code:

   jQuery(document).ready(function(){
   var drawer = jQuery.cookie(‘accdrawer’);
   if(drawer == undefined) {
   drawer = “0″;
   }
   jQuery(‘#accordion2′).accordion({
   header: ‘h3′,
   navigation: false,
   active: parseInt(drawer),
   autoHeight: false,
   clearStyle: true,
   collapsible: true,
   alwaysOpen: true,
   animated: ‘slide’,
   change: function(event,ui) {
   var index = jQuery(this).find(“h3″).index(ui.newHeader[0]);
   if (index > -1) {
   jQuery.cookie(“accdrawer”, index, {path: “/”});
   }
   }
   });
   });

   Main

   Search
   Test
   Review

   Database

   Summary

   Dashboard

   Summary
8. 

   Stuart
   October 29th, 2009 - 18:55

   Hi Mike,
   Thanks for the code.
   Any news on when you might have a working example?
9. 

   mikecentola
   October 30th, 2009 - 13:06

   Working example is up (unofficially) at http://www.truenegative.com

   Take a look and let me know what you think!
10. 

    kibi
    November 6th, 2009 - 07:05

    Thanks for article.
    How to store nested list accordions ?
    In you example http://www.truenegative.com you have 1 level accordion with
    Here it is nested list accordion – http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php
    Any ideas?

    Thank you for answer
11. 

    Parker Hillius
    November 18th, 2009 - 18:09

    Setting the navigation attribute to true will let the accordion automatically handle this for you.

    From jQuery Documentation:

    navigation

    Type:Boolean
    Default:false

    If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.
12. 

    mikecentola
    November 18th, 2009 - 18:23

    Right, that will work for having the anchor tag in the address bar. Using a cookie circumvents that. I can’t remember why I didn’t want it in the address bar, but it will come to me haha.
13. 

    Cool Dude
    January 11th, 2010 - 03:34

    Your site was extremely interesting, especially since I was searching for thoughts on this subject last Thursday.

    I’m Out!
14. 

    maumau
    September 3rd, 2010 - 11:47

    thanks for sharing, just a little bug, pay attention, in the code is written “collapsibe” instead of “collapsible”.
15. 

    Wim Symons
    September 23rd, 2010 - 08:09

    Thanks, your article saved my day! And another big thanks to HelpSeeker, as it was his posted changes which made it all work.
16. 

    mikecentola
    October 4th, 2010 - 11:20

    @maumau Thanks! Fixed the typo
17. 

    Vojtech Zíka
    October 17th, 2010 - 15:04

    Hi,
    thanks for the cue.

    I´ve found one bug – when I implemented thi code to my site, it was working fine, but sometimes, the active field collapsed back to “inactive” state. So I was trying to fix it and there is the solution. If you are experiencing the same, set the parameter “Navigation” to false value.
18. 

    George
    November 27th, 2010 - 02:27

    Very useful and thanks very much for sharing.
19. 

    Justin
    December 27th, 2010 - 15:10

    Any idea on how to have this work per page? If I copy this page into a new page, jq and all, it reads the cookie. If a site uses multiple accordions this is not how it should work.
20. 

    Anders
    April 8th, 2011 - 08:50

    How can I make this accordion move more smoothly?

    It’s ok when it’s opening but when closing a panel it’s not smooth at all.
21. 

    Roland
    August 3rd, 2011 - 13:22

    Nothing I found here worked for my particular installation. I developed my own way using the index, if anyone finds this useful:

    $(document).ready(function() {
    $(‘#accordion’).accordion({
    autoHeight: false,
    collapsible: true,
    active: false,
    change: function(event,ui) {
    var index = ui.options.active;
    if (index > -1) {
    $.cookie(‘accidx’, index, {expires: 2, path: ‘/’});
    }
    }
    });
    if ($.cookie(‘accidx’) > -1) {
    var idx = Number($.cookie(‘accidx’));
    $(‘#accordion’).accordion(‘option’, ‘animated’, false);
    $(‘#accordion’).accordion(‘activate’,idx);
    $(‘#accordion’).accordion(‘option’, ‘animated’, ‘slide’);
    }
    });
22. 

    iceberg
    September 21st, 2011 - 02:54

    Here’s a working example (except for the cookie getter/setter)

    jQuery(document).ready(function() {

    var selected = readCookie(‘activeMkt’);
    var select = -1;
    if (selected){
    select = parseInt(selected);
    }

    $( “#accordion” ).accordion({
    header: ‘h3′,
    autoHeight: false,
    navigation: true,
    collapsible: true,
    alwaysOpen: false,
    animated: ‘slide’,
    active: select,
    change: function(event,ui) {
    var sel = ui.newHeader.children(‘a’).attr(‘id’);
    if (sel === undefined) {
    setCookie(‘activeMkt’,'-1′);
    } else {
    setCookie(‘activeMkt’,sel);
    }
    }
    });

    });

    EINS
    EIN

    ZWEI
    ZWE

    DREI
    DRE
23. 

    konteyner
    October 1st, 2011 - 10:21

    thanks for your sharing,I use accordion menu on my website…
24. 

    Gautham Sarang
    October 2nd, 2011 - 11:14

    I am very much new to Jquery. what I want is something very simple. Could anyone please tell me how to achieve this.

    I have two menu’s which needs to be ‘remembered’ by the browser.
    1. A menu that is hidden initially and shown when clicked on a link
    2. I have put ‘help-hints’ allover the site. There is a button to hide the hint icons.

    What I want is : Once that main menu is shown, it should stay shown while browsing through the pages. Same with the hint icons. When someone clicks on the link that hides/shows the hint icons, they should get hidden/displayed.

    The following is my code :

    JQuery :

    jQuery(‘.slideout’).click(function() {
    jQuery(‘.sf-green’).slideToggle();
    jQuery(‘.slideout, .slidein’).toggleClass(‘slidein slideout’);
    });

    jQuery(‘#infobutton’).click(function(){
    jQuery(‘.info_on, .info_off’).toggleClass(‘info_off info_on’);
    jQuery(‘.hint, .hintoff’).toggleClass(‘hintoff hint’);
    });

    HTML

    Main Menu

    Help »
    

    Any help will be great!

    Thank you!
25. 

    George
    November 23rd, 2011 - 06:32

    Thank you so much! you saved my day on implementing this in my website haha love you~
26. 

    Manny
    November 25th, 2011 - 08:53

    Useful and brilliant thank you for sharing this. save me today this did.

Leave a comment Cancel reply