I've implemented a straightforward jQuery script that toggles the "active" class on an li element when it is clicked:
$('li').click(function() {
$(this).toggleClass('active');
});
My goal is to hide all other li elements in the list when one is made active by setting their display property to none. Then, when the same active li is clicked again, I want to remove the active class and show all other li elements once more. However, achieving this has been challenging for me.
Initially, I attempted using an if statement inside the click function to check for the presence of the "active" class. If found, I set all li elements to be hidden; if not, I tried resetting their CSS properties to make them visible again. Unfortunately, this approach did not yield the desired results.
In an edit, I mentioned that tilz0R's solution was close to what I needed. With some slight modifications, I managed to adapt it to suit my requirements:
$('li').click(function() {
$(this).toggleClass('active').siblings().toggleClass('hidden');
});
The 'hidden' class simply contains a display property of none, allowing all li elements, except the one clicked, to be hidden. Clicking the active li a second time will cause all li elements to be displayed once more.