JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/1510510/misc/jquery.cookie.js"></script>
Cookie: <span id="display"></span>
<br>
<li class="primary">My Profile</li>
    <div class="menu_content" id="m1">
        <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">Compare</li>
    <div class="menu_content" id="m2">
        <ul>
            <li class="secondary"><a href="user/my-scores">My Scores</a></li>
        </ul>
    </div>

CSS

.menu_content { display: none; }
li.primary { background: #ccc; }

JavaScript

$(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

 // show cookie content
 $('#display').html(expanded.join(','));

 // 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 index of widget to expanded list
   tmp.push(el.id);
  }
  expanded = tmp.getUnique();
  $.cookie("panelState", expanded.join('|'), { expires: cookieExpires } );

 // show cookie content
 $('#display').html(expanded.join(','));
 }
});

// 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;
}