Toggle show nur angeklickt

Question

Wenn ich auf die Details klicke shows alle. Was ich will ist, dass er nur das toggle Linkdetail, das ich klicke, ist.

Example fiddle

JS:

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

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

Answer 1

Gehen Sie auf die übergeordnete div Breite Klasse bis kop mit .closest('.kop') aus dem Köter Ausgangs mieten geklickt Objekt $(this), Ziel dann die nächste div mit Klasse listt.next('.listt') mit:

$('.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>

Answer 2

$('.listt ul').hide(); 
 
$(document).on('click','.details a', function(){ 
 
\t $('.listt ul').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>