JrProgrammeur JrProgrammeur - 1 month ago 7
Javascript Question

Toggle show only clicked one

If I click on the details it

shows
all.
What I want is that he will only
toggle
the link detail that I click.

Example fiddle

JS :

$('.listt ul').hide();

$(document).on('click','.details a',function(){
$('.listt ul').toggle();
});

Answer

Go up to the parent div width class kop using .closest('.kop') starting from the current clicked object $(this), then target the next div with class listt using .next('.listt') :

$('.listt').hide();

$(document).on('click','.details a',function(){
  $(this).closest('.kop').next('.listt').toggle();
})
.kop
{
  display: block;
  width: 100%;
  padding: 5px 0;
}
.kop div
{
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="kop">
  <div class="name">John</div>
  <div class="details"><a href="#">(details)</a> </div>
</div>
<div class="listt">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

<div class="kop">
  <div class="name">John</div>
  <div class="details"><a href="#">(details)</a> </div>
</div>
<div class="listt">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

Comments