Take the 2-minute tour ×

I have a nested ul/li list

... and so on

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?

<script type="text/javascript">
        $(document).ready(function() {
            $('div#sideNav li li > ul').hide();    //hide all nested ul's
            $('div#sideNav li > 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) > a').click(function() {
                $(this).toggleClass('accordionExpanded'); //for CSS bgimage, but only on first a (sub li>a's don't need the class)
                return true;
share|improve this question
add comment

5 Answers

up vote 4 down vote accepted

you can save the current open menu item in a cookie $.cookie('menustate')

similar: http://stackoverflow.com/questions/2527370/how-to-remember-last-state-with-jquery

share|improve this answer
+1 forgot about the cookie option. –  Tomalak Apr 19 '10 at 20:05
It's not a great option, really, especially if having cookies enabled is fundamentally essential to navigating the site. It's less so now, but people, for various reasons, are still sketchy about cookies. –  dclowd9901 Apr 19 '10 at 20:09
add comment

The same way you manage state when passing data from page to page:

  • Querystring
  • Cookies
  • Form post / hidden field
  • Ajax to and from the server
share|improve this answer
add comment

I'll assume you dont like any of the previous answers since none of them have been accepted and present you with a less "correct" way of doing it. Before I get flamed to death, this is just my attempt at doing it with pure js/jq. You could parse out the URL (http://example/subsite) and select whichever piece is relevant (for the sake of ease, lets assume /subsite is what you want).

    var pathname = window.location.pathname;  
    var splitpath = pathname.split("/");        
    $("#nav-" + splitpath[1] + "").children().class('current')

Build your ID's into something like <li id=nav-subsite> and use the parsed out URL to build a selector for the correct tab/li/whatever. Is it weird? Sure, but I figured I'd throw in my $.02

share|improve this answer
add comment

This is not easily doable in JavaScript alone.

  • Either the server sets the accordionExpanded CSS class correctly when the page is reloaded (directly into the source HTML). This would require the server knows what <li>s the user had clicked on, naturally.
  • Or you avoid reloading the page at all and do partial page updates through AJAX calls. This is what most "modern" websites do.
  • Or you do what Glennular suggests and save state info to a cookie.

Your choice.

share|improve this answer
add comment

I'm not sure what your menu is supposed to be doing exactly, but if it's a nav menu, you could add a brief bit of markup to your body element for each base page:

<body class="home"> <!-- for homepage -->
<body class="about"> <!-- for about page -->
<body class="etc"> <!-- for etc. -->

And have jQuery look for this marker and make a decision on how to handle the list tree once the page loads based on which page it is. It wouldn't require setting any cookies, and so long as they have JS enabled (which every user should at this point), everything's kosh magosh.

share|improve this answer
add comment

Your Answer


