Hello, just a quickie that I can't seem to figure out. I have this jQuery accordion menu that is also using the cookie plugin and everything works great but I am trying to add a class of "active" when the link to open the accordion, then remove it when it is clicked again. I thought this would've been something simple to do but it has proved otherwise. I tried using addClass & removeClass but to no avail and I also tried using toggleClass but everything I do messes with the cookie plugin and then that doesn't work. I am using jQuery.1.3.2
Any help or guidance would be greatly appreciated. Here is my current code:
function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
var cookie = $.cookie(this.id);
if(cookie === null || String(cookie).length < 1) {
$('#' + this.id + '.expandfirst ul:first').show();
}
else {
$('#' + this.id + ' .' + cookie).next().show();
}
});
$('ul li a').click(function() {
var checkElement = $(this).next().slideUp();
var parent = this.parentNode.parentNode.id;
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
if((String(parent).length > 0) && (String(this.className).length > 0)) {
$.cookie(parent, this.className);
}
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {
initMenus();
});
I tried putting .toggleClass on this line:
var checkElement = $(this).toggleClass('active').next().slideUp();
I know it has to go within this .click function but I can't figure it out. Thanks in advance!
EDIT
I do want to mention that if I put .addClass("active") on this line here:
var checkElement = $(this).next().slideUp();
It successfully adds the class to the parent li, but the problem occurs when the child ul is open and you click a link from that ul, it goes to the next page but then the cookie stops working and doesn't remember the last "state" it was in. Hope this helps a little more.