Jquery Menu remembering the state of the menu.

Question

Hello,

I am trying to get my menu system to read a cookie to it can remember the menu state. once remembered the menu would stayopen/close depending on the cookie.

using alert in the javascript ive been able to read the cookie before and after clicks but sadly I cannot get the if statement correct in order to keep open/close the hidden html.

any help much appreciated!

code below:

HTML

<li class="primary"><a href="user/me">My Profile</a></li>
    <div class="menu_content">
        <ul>
            <li class="secondary"><a href="<?php print base_path() ?>user/my-education">My Education History</a></li>
            <li class="secondary"><a href="<?php print base_path() ?>user/my-achievements">My Achievements</a>
                <ul>
                    <li><a href="user/school">School</a></li>
                    <li><a href="user/my-achievements/year1">Year 1</a></li>

                </ul>
            </li>
            <li class="secondary"><a href="user/my-details">My Account Details</a></li>
            <li class="secondary"><a href="user/my-settings">My Account Settings</a></li>
        </ul>
    </div>
    <li class="primary"><a href="compare">Compare</a></li>
    <div class="menu_content">
        <ul>
            <li class="secondary"><a href="user/my-scores">My Scores</a></li>
        </ul>
    </div>

Jquery

  var state = $.cookie("panelState");

        $("li.primary").click(function(){

        if($.cookie("panelState") == "expanded") {
            $(this).next().slideToggle('300');          
            $(this).removeClass("open");
            $(this).cookie("panelState", "collapsed");
            alert($.cookie("panelState"));
        } else if ($.cookie("panelState") == "collapsed") {
            $(this).next().slideToggle('300');
            $(this).addClass("open");
            $(this).cookie("panelState", "expanded");
            alert($.cookie("panelState"));
            }
        });

Answer 1

Hello,

this is normal that you can see the value of the cookie in the alert and that the if statement isn't working.

I thing your using this plugin : http://plugins.jquery.com/files/jquery.cookie.js.txt

To set a cookie, you need to use the jQuery context ($.cookie()) and not the DOMElement ($(this).cookie())

New code will be :

var state = $.cookie("panelState");

$("li.primary").click(function(){

if($.cookie("panelState") == "expanded") {
    $(this).next().slideToggle('300');          
    $(this).removeClass("open");
    $.cookie("panelState", "collapsed");
    alert($.cookie("panelState"));
} else if ($.cookie("panelState") == "collapsed") {
    $(this).next().slideToggle('300');
    $(this).addClass("open");
    $.cookie("panelState", "expanded");
    alert($.cookie("panelState"));
    }
});

If you need to distinguish your menu, in the value of your cookie, add the name to find it on reload.

Data is useless here, when refreshing page, data are no more longer present.

Answer 2

It appears you want to save the state of each li.primary... using $(this).cookie() will not work. So the easiest solution would be to add an id to each header (I added m1 and m2 in this demo) and save that to a cookie if it is expanded.

Try this (demo)

$(document).ready(function(){

 var cookie = $.cookie("panelState"),
  expanded = cookie ? cookie.split("|").getUnique() : [],
  cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date

 // Remember content that was expanded
 $.each( expanded, function(){
  $('#' + this).show();
 })

 $('li.primary').click(function(){
  $(this).toggleClass("open");
  $(this).next().slideToggle('300', function(){
   updateCookie(this);
  });
 })

 // Update the Cookie
 function updateCookie(el){
  var indx = el.id;
  var tmp = expanded.getUnique();
  if ($(el).is(':hidden')) {
   // remove element id from the list
   tmp.splice( tmp.indexOf(el.id) , 1);
  } else {
   // add id of header to expanded list
   tmp.push(el.id);
  }
  expanded = tmp.getUnique();
  $.cookie("panelState", expanded.join('|'), { expires: cookieExpires } );
 }
});

// Return a unique array.
Array.prototype.getUnique = function(sort){
 var u = {}, a = [], i, l = this.length;
 for(i = 0; i < l; ++i){
  if(this[i] in u) { continue; }
  a.push(this[i]);
  u[this[i]] = 1;
 }
 return (sort) ? a.sort() : a;
}