Welcome to WebmasterWorld Guest from 50.19.53.104

Forum Moderators: open

Message Too Old, No Replies

Toggle DIV when multiple divs exist

     

greencode

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

5+ Year Member



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.

greencode

12:44 pm on Aug 29, 2013 (gmt 0)

5+ Year Member



Got it!

Should be this:

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

whoisgregg

4:55 pm on Aug 30, 2013 (gmt 0)

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



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

Featured Threads

Hot Threads This Week

Hot Threads This Month