CODEWITHSUNDEEP
jquery
Bentley4
Bentley4

Reputation: 11038

Toggling elements with identical class names visible/invisible for only those clicked on

<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

Answers (2)

VoteyDisciple
VoteyDisciple

Reputation: 37823

How about:

$(".single-toggle").click(function(){ 
  $(this).closest('li').find('.invisible-when-folded').toggle(); 
});

Upvotes: 2

Felix Kling
Felix Kling

Reputation: 817238

Select all (following) siblings of the clicked element with that class:

$(this).nextAll('.invisible-when-folded').toggle();

DEMO

Have a look at jQuery's traversal methods.

Upvotes: 3

Related Questions