homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Toggle DIV when multiple divs exist
greencode

5+ Year Member



 
Msg#: 4605730 posted 11:35 am on Aug 29, 2013 (gmt 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.

 

greencode

5+ Year Member



 
Msg#: 4605730 posted 12:44 pm on Aug 29, 2013 (gmt 0)

Got it!

Should be this:

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

whoisgregg

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



 
Msg#: 4605730 posted 4:55 pm on Aug 30, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved