Reputation: 11038
<ul>
<li>
<div class="single-toggle">|Toggle|</div>
<div class="visible-when-folded">
<div class="name">Peter</div>
<div class="date">3 january 1984</div>
</div>
<div class="invisible-when-folded">
<div class="about">Funny guy</div>
<div class="contact_info">0879876745</div>
</div>
</li>
<li>
<div class="single-toggle">|Toggle|</div>
<div class="visible-when-folded">
<div class="name">David</div>
<div class="date">17 April 1988</div>
</div>
<div class="invisible-when-folded">
<div class="about">Jackass</div>
<div class="contact_info">0979876345</div>
</div>
</li>
</ul>
Desired result
That when I click on the |Toggle|
element only the elements inside div.invisible-when-folded
disappear in the respective li
element.
What I have tried
Clicking on |Toggle|
in this code toggles the div invisible/visible from both li
elements at the same time. How do I let it toggle only the li
of the toggle I clicked in?
Upvotes: 0
Views: 121
Reputation: 37823
How about:
$(".single-toggle").click(function(){
$(this).closest('li').find('.invisible-when-folded').toggle();
});
Upvotes: 2
Reputation: 817238
Select all (following) siblings of the clicked element with that class:
$(this).nextAll('.invisible-when-folded').toggle();
Have a look at jQuery's traversal methods.
Upvotes: 3