jquery slideToggle looped divs независимо

Question

У меня возникают проблемы с моей функцией slideToggle в jquery, когда я использую divs, созданные в цикле. Когда я нажимаю одну из кнопок, я хочу, чтобы она отображала соответствующий div вместо всех разделов под всеми кнопками.

Это мой CSS:

<style> 
    .toggle { display:none;} 
    p { width:400px; } 
</style> 

Вот мой цикл с кнопкой и DIV

<?php 
include('sql.php'); 

$i = 0; 
while ($i < count($rows)) { 
echo " 
<button class='trigger'> 
<table width='100%'> 
<tr> 
<td width='20%'><img src='http://localhost/app-side/Icons/beer_icon.png' /></td> 
<td width='80%'><h2>{$rows[$i]['titel']} </h2></td> 

</tr> 
</table> 
</button><br> 

<div class='toggle'> 

<p> 
    {$rows[$i]['info']} 
</p> 
</div>"; 


$i++; 
} 
?> 

А вот моя функция slideToggle

<script> 


    $('.trigger').click(function(){ 
    $('.toggle').slideToggle('fast'); 

    }); 

</script> 

Спасибо заранее.

Answer 1

Самого простое решение было бы, вероятно, будет обернуть весь захват петли HTML в дальнейшем DIV, а затем внесение изменений вашего Jquery так:

$('.trigger').click(function() { 
    $(this).siblings('.toggle').slideToggle('fast'); 
}); 

Поскольку эти два элемента сгруппированы внутри общего предка, можно найти другой, используя метод siblings. Естественно, вы можете обойти это сотнями способов, но это показалось мне самым быстрым и легким.

Вот скрипка: http://jsfiddle.net/QukC8/