JQuery Toggle следующий класс

Question

Я делаю блоггинг-сайт и хочу, чтобы заголовки или ссылки отображали сообщение при нажатии, я работаю так, чтобы все они открывались при нажатии, но я просто хочу, чтобы он был ниже заголовка

JQuery:

$(document).ready(function(){ 

    $('.slidingDiv').hide(); 
    $('.show_hide').show(); 

    $('.show_hide').click(function(){ 
     $('.slidingDiv').slideToggle(); 
    }); 

}); 

PHP:

for($i=0; $i<5; $i++) 
{ 
    print " 
     <a href='#' class='show_hide'>Article name</a> 
     <div class='slidingDiv'> 
      Fill this space with really interesting content. 
     </div> 
     <br> 
     <br> 
    "; 
} 

чем кс заранее

Answer 1

Вы должны найти следующий .slidingDiv элемент:

$(document).ready(function(){ 

    $('.slidingDiv').hide(); 
    $('.show_hide').show(); 

    $('.show_hide').click(function() { 
     // 'this' is now the clicked .show_hide element 
     $(this).next().slideToggle(); 
    }); 

}); 

Answer 2

Вы можете использовать .next выбрать только следующий .slidingDiv

$(this).next('.slidingDiv').slideToggle(); 

Snippet

$('.slidingDiv').hide(); 
 
$('.show_hide').show(); 
 

 
$('.show_hide').click(function() { 
 
    $(this).next('.slidingDiv').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='show_hide'>Article name</a> 
 
<div class='slidingDiv'> 
 
    Fill this space with really interesting content. 
 
</div> 
 
<br> 
 
<br> 
 
<a href='#' class='show_hide'>Article name</a> 
 
<div class='slidingDiv'> 
 
    Fill this space with really interesting content. 
 
</div>