I have been using the Sitepoint book jQuery from Novice to Ninja. I’m still very much a novice but I’m making some progress…
I have a jQuery accordion effect set-up on a a nested list. The effect is working great, however, I want to retain the menu state (e.g. which section is open) when a user clicks a particular link and the site loads a new page. I’m thinking I must need to use a cookie or similar but have no idea how to implement this.
How do I do this with jQuery? Any help appreciated…
Here is the jQuery I have currently:
$(document).ready(function(){
$('.boxCategories ul > li ul')
.click(function(e){
e.stopPropagation();
})
.filter(':not(:first)')
.hide();
$('ul#mainmenu-nav > li > a').click(function(e) { e.preventDefault();
});
$('.boxCategories ul > li, .boxCategories ul > li > ul > li').click(function(){
var selfClick = $(this).find('ul:first').is(':visible');
if(!selfClick) {
jQuery(this)
.parent()
.find('> li ul:visible')
.slideToggle();
}
$(this)
.find('ul:first')
.stop(true, true)
.slideToggle();
});
});
And here is an example of the list markup:
<ul id="mainmenu-nav">
<li class="li-nav">
<a href="http://www.link.co.uk/cat_3.html">Section 1</a>
<ul class="ul-nav">
<li class="li-nav">
<a href="http://www.link.co.uk/cat_12.html">Product</a>
</li>