I have expanding menus, and i have them all to expand when choosing one.
My question is that i don't know how to make them stay expanded after clicking on the submenus. Now they collapse, but i want them to stay expanded after ive selected one.
My site: www.kennybengtsson.se
This is my expandingmenus.js if this helps to understand/explain:
var item_title = $("#menu ul").eq(num).children(":first");
var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
var items1 = $("#menu ul").eq(1).children().filter(function (index) { return index > 0; });
var items2 = $("#menu ul").eq(2).children().filter(function (index) { return index > 0; });
var items3 = $("#menu ul").eq(3).children().filter(function (index) { return index > 0; });
var items4 = $("#menu ul").eq(4).children().filter(function (index) { return index > 0; });
var items5 = $("#menu ul").eq(5).children().filter(function (index) { return index > 0; });
var items6 = $("#menu ul").eq(6).children().filter(function (index) { return index > 0; });
var items0 = $("#menu ul").eq(0).children().filter(function (index) { return index > 0; });
/* hide items if not active */
if (items.is(".active") == true) {
items.hide();
}
/* hide items if not active */
if (items.is(".active") == false) {
items.hide();
}
/* add click functions + pointer to title */
item_title.css({cursor:"pointer"}).toggle(
function () {
items.show(speed);
items1.show(speed);
items2.show(speed);
items3.show(speed);
items4.show(speed);
items5.show(speed);
items6.show(speed);
items0.show(speed);
}, function () {
items.hide(speed);
items1.hide(speed);
items2.hide(speed);
items3.hide(speed);
items4.hide(speed);
items5.hide(speed);
items6.hide(speed);
items0.hide(speed);
}
)