CODEWITHSUNDEEP
jquerytoggle
sqe
sqe

Reputation: 1716

jQuery toggle open li when clicking on closed li

I've been working and searching on this for hours but my approach doesn't work.

This is my situation:

FIDDLE

If I click on one of the two "submenu-ebene1" they toggle. But when I click on the other one, I want the one that is currently open to close again. The same behaviour for Link 1 and Link 2 inside.

IMHO all I need to do is to search the siblings of my submenu-ebene1 li for the one that currently has the class ".active" and slideToggle that. Nearly the same for submenu-ebene2 due to different markup there.

I tried to do it like this:

//toggle submenu-ebene1
$("submenu-ebene1").on("click", function() {
    $(this).siblings(".active").slideToggle();
});

//toggle submenu-ebene2
$("submenu-ebene2 li").on("click", function() {
    $(this).siblings(".active-ebene2").slideToggle();
});

I would love to get some tips first instead of a solution - I'm here to learn and it drives me crazy to not understand that simple toggle.

Upvotes: 1

Views: 2143

Answers (1)

Tats_innit
Tats_innit

Reputation: 34117

Like this http://jsfiddle.net/SyYzY/ or http://jsfiddle.net/aN5ey/

Hope it fits your need :)

Code

//apply active-classes to submenu-ebene1
$(".link").click(function () {
    $(".submenu-ebene2").slideUp();
    $(".active").toggleClass("inactive active");
    $(this).addClass("active").removeClass("inactive");
});

//apply active-classes to submenu-ebene2
$(".submenu-ebene2 > li.inactive-ebene2").click(function (e) {
    $(".active-ebene2").toggleClass("inactive-ebene2 active-ebene2");
    $(this).addClass("active-ebene2").removeClass("inactive-ebene2");
});

// submenu-ebene1 toggle
$(".submenu li").click(function (e) {
    $(this).next("li").children(".submenu-ebene2").slideToggle();
});

// submenu-ebene2 toggle
$(".submenu-ebene2 li").click(function () {
    $(this).next("li").children(".submenu-ebene3").slideToggle();
});




//toggle submenu-ebene1
$("submenu-ebene1").on("click", function () {
    $(this).siblings(".active").slideToggle();
});

//toggle submenu-ebene2
$("submenu-ebene2 li").on("click", function () {
    $(this).siblings(".active-ebene2").slideToggle();
});

Upvotes: 1

Related Questions