Welcome to WebmasterWorld Guest from 54.162.138.175

Forum Moderators: open

Message Too Old, No Replies

Toggle DIV when multiple divs exist

     
11:35 am on Aug 29, 2013 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I always get confused with this!

I have the following:

<ul class="actions">
<li class="video icn"></li>
<li class="settings icn">
<ul class="settings-menu">
<li>Block</li>
<li>Always Decline</li>
</ul>
</li>
<li class="close icn"></li>
</ul>

And I need it so when the user clicks on the .settings list item it then adds the class of .open to the .settings-menu unordered list.

I have the following:

$(".settings.icn").click(function () {
$(".settings-menu").toggleClass("open");
});

Which works but if there's more than one of these on the page then it adds the class to all on the page. I've therefore tried the following but they don't work:

$(".settings.icn").click(function () {
$(this).closest(".settings-menu").toggleClass("open");
});

$(".settings.icn").click(function () {
$(this).siblings(".settings-menu").toggleClass("open");
});

Any ideas would be much appreciated.
12:44 pm on Aug 29, 2013 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Got it!

Should be this:

$(".settings.icn").click(function () {
$(this).children(".settings-menu").toggleClass("open");
});
4:55 pm on Aug 30, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 0


Glad you got it sorted, greencode! And thank you for posting back with your solution. :)