title: Jquery Accordion Menu - Keep Selected Menu Open
body: <p>I'm attempting to create a vertical accordion menu for a website I'm working on. This is my first time ever doing anything with jquery. I've been able to get a working menu the way I want it, except for a couple of things. </p>
  
  <p>1) I need a menu that will stay expanded based on which page is loaded, if you click on an item inside the second menu, then the second menu needs to be expanded when the page is reloaded. The menu doesn't stay expanded when you click and load a new page from within the menu. Upon page reload, it just completely collapses until you click on a header to expand it again. I've been searching online for days and can't find anything that I can use to solve this problem. I've looked at using the jquery cookie plugin and just checking to see which page is currently loaded and using that to determine which menu needs to be expanded, but I can't get either of them to work.</p>
  
  <p>2) My menu only expands when clicked, it doesn't collapse when clicked again. Is it possible to collapse the same menu you just expanded by clicking again?</p>
  
  <p>Here's the js file I created:</p>
  
  <pre><code>function initMenu() {
      $('#menu ul').hide();
      $('#menu li a').click(function () {
          var checkElement = $(this).next();
          if ((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
              $(this).siblings().removeClass("selected");
              return false;
          }
          if ((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
              $('#menu ul:visible').slideUp('normal');
              checkElement.slideDown('normal');
              if (!$(this).hasClass("selected")) {
                  // Remove the class from anything that is active
                  $("a.selected").removeClass("selected");
                  // And make this active
                  $(this).addClass("selected");
              }
              return false;
          }
      });
  }
  $(document).ready(function () {
      initMenu();
  });
  </code></pre>
  
  <p>Here's a jsfiddle for full html and css as well: <a href="http://jsfiddle.net/CShsY/" rel="nofollow">http://jsfiddle.net/CShsY/</a></p>
  
  <p>Thanks. </p>