jquery slideToggle looped divs independently - php

Question

I'm having problems with my slideToggle function in jquery when I use divs created in a loop.
When I press one of the buttons I want it to show the corresponding div instead of all the divs underneath all the buttons.
This is my css:
<style>
.toggle { display:none;}
p { width:400px; }
</style>
Here is my loop with button and 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++;
}
?>
And here is my slideToggle function
<script>
$('.trigger').click(function(){
$('.toggle').slideToggle('fast');
});
</script>
Thank you in advance.

Answer 1

The easiest solution would probably be to wrap your entire looping html in a further div, and then amending your jQuery like so:
$('.trigger').click(function() {
$(this).siblings('.toggle').slideToggle('fast');
});
Since the two elements are now grouped inside a common parent, one can find the other using the siblings-method. Naturally, you can go about this in hundreds of ways, but this one struck me as the quickest and easiest.
Here's a fiddle: http://jsfiddle.net/QukC8/