title: JQuery - nested ul/li list, keep expanded after reload of page
body: <p>I have a nested ul/li list</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;first&lt;/li&gt;
  &lt;li&gt;second
  &lt;ul&gt;
  &lt;li&gt;Third&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  ... and so on
  </code></pre>
  
  <p>I found this JQuery on the interweb to use as inspiration, but how to keep the one item i expanded open after the page has reloaded?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $('div#sideNav li li &gt; ul').hide();    //hide all nested ul's
              $('div#sideNav li &gt; ul li a[class=current]').parents('ul').show().prev('a').addClass('accordionExpanded');  //show the ul if it has a current link in it (current page/section should be shown expanded)
              $('div#sideNav li:has(ul)').addClass('accordion');  //so we can style plus/minus icons
              $('div#sideNav li:has(ul) &gt; a').click(function() {
                  $(this).toggleClass('accordionExpanded'); //for CSS bgimage, but only on first a (sub li&gt;a's don't need the class)
                  $(this).next('ul').slideToggle('fast');
                  $(this).parent().siblings('li').children('ul:visible').slideUp('fast')
                  .parent('li').find('a').removeClass('accordionExpanded');
                  return true;
              });
          });
      &lt;/script&gt;
  </code></pre>