I make my own accordion menu with html + jquery
its working perfectly to forth level, then i add a cookie code from net and do some extra work it also work 100% perfectly in html.
My complete HTML + jQuery code reference is in JS-Fiddle Accordion Menu with Cookie
Now i merge it in my wordpress menu very carefully, it shows very weird behavior. when i click on plus the sub menus are open and i click on sub category the page goes to that category but the menu is close but when i again open the sub menu and click on the menu or refresh the page its work. I worried why in wordpress the jquery cookie not working.
Here is jquery cookie + jquery accordion code:
jQuery(document).ready(function () {
// baking cookie ;p
function set_cookie(ID) {
document.cookie = ID + "=opened";
}
// getting it out from the oven... ;)
function get_cookies_array() {
var cookies = {};
if (document.cookie && document.cookie != '') {
var split = document.cookie.split(';');
for (var i = 0; i < split.length; i++) {
var name_value = split[i].split("=");
name_value[0] = name_value[0].replace(/^ /, '');
cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
}
}
return cookies;
}
// yuck... sorry i don't know how to cook :S
function unset_cookie(cookie_name) {
var cookie_date = new Date();
cookie_date.setTime(cookie_date.getTime() - 1);
document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
var tree_id = 0;
jQuery('ul.b29-tree li:has(ul)').addClass('has-child').prepend('<span class="switch">+</span>').each(function () {
tree_id++;
jQuery(this).attr('id', 'tree' + tree_id);
});
// Accordion code
jQuery('ul.b29-tree li > span.switch').click(function () {
var tree_id = jQuery(this).parent().attr('id');
if (jQuery(this).hasClass('open')) {
jQuery(this).parent().find('ul:first').slideUp('fast');
jQuery(this).removeClass('open');
jQuery(this).text('+');
unset_cookie(tree_id)
} else {
jQuery(this).parent().find('ul:first').slideDown('fast');
jQuery(this).text('-');
jQuery(this).addClass('open');
set_cookie(tree_id)
}
});
var cookies = get_cookies_array();
for (var name in cookies) {
$('#' + name).find('> ul').css({'display' : 'block'});
$('#' + name).find('> span').addClass('open').text('-');
}
});
I am working in wordpress on my xamp so i can’t give you that link but above link is the demo of html