Active page in jQuery Accordion Menu

Question

First of all, forgive me if this has already been answered, I searched but couldn't find an example relevant to what I'm trying to do.

I have a vertical menu with some sub menus. When the top level menu is clicked the sub menu opens up. The problem is that I would like the sub menu you clicked to stay open when you arrive to the new page. As it is now, when a sub-menu item is clicked and you go to the destination page, the menu collapses.

Here's my code:

<script type="text/javascript" charset="utf-8">
$(function(){
    $('#menu li a').click(function(event){
        var elem = $(this).next();
        if(elem.is('ul')){
            event.preventDefault();
            $('#menu ul:visible').not(elem).slideUp();
            elem.slideToggle();
        }
    });
});
</script>

And a Fiddle:

http://jsfiddle.net/4fYS6/

Thanks in advance

I'd recommend saving the active menu index to cookies and then getting it back (+ setting the item at the specific index active) after getting to the new page. For how to set/read cookies with jQuery, see [How to set cookies with jQuery](http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery). — Petr Čihula, May 28 '13 at 13:09
in JSfiddle you are not moving to next page?... so unable to raplicate your probelm... by clicking on link do you load the page content via ajax or? load the 2nd page completely? — rahul maindargi, May 28 '13 at 13:24

Arpit · Answer 1 · 2013-05-28T13:43:17.670

0

try this if you want to avoid cookies

HTML

  <iframe  src="" name='frame' >
  </iframe>  

<li><a href="http://www.bing.com" target="frame">Submenu 1</a></li>

CSS

div{
  display:inline-block;
}
#frm{
  height:500px;
  width:500px;
 border:0px solid black;

}

Demo

Adjust the styling as per your need.

edited May 28 '13 at 13:43

answered May 28 '13 at 13:33

Arpit

12,427
2
25
40

score 0 · Answer 2 · answered May 28 '13 at 14:00

As you are loading second page completely, you can pass the selected UL index back to server and return in response and on Page load open that UL again.

Something like below code... (Not exact code. ) DEMO

$(function(){
    $('#menu li a').click(function(event){
        var elem = $(this).next();
        if(elem.is('ul')){
            event.preventDefault();
            $('#menu ul:visible').not(elem).slideUp();
            elem.slideToggle();
        } else {
          alert("Parent Index "+$('#menu ul').index($(this).parent().parent()));
            $(this).attr("href" ,$(this).attr("href")+"?MenuIndex="+ $('#menu ul').index($(this).parent().parent()));

        }

    });
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

    if(getURLParameter("MenuIndex")) {
     $('#menu ul').eq(getURLParameter("MenuIndex")).click();
    }
});

Active page in jQuery Accordion Menu

2 Answers2