Toggle DIV when multiple divs exist

[greencode]

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]

Got it!

Should be this:

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

[whoisgregg]

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