jQuery / PHP: Show more infos between two rows using slideToggle

Question

I am nearly finished with my event-table, but one last thing needs to be done. I've a table created and now I want to show infos by clicking on an event.

My actual code is without slideToggle. If you click on an event, it opens the event on a new page and I am not lucky with it. I want to open the additional infos of the events below the row.

Here is the actual code (updated):

<?php
$query = "SELECT `id`, TIME_FORMAT(doors,'%H:%i') AS `doors`, TIME_FORMAT(begin,'%H:%i') AS `begin`, `category`, `who`, `infos`, `location`, `smoke`, `dogs`, DATE_FORMAT(date,'%d.%m.%Y') AS `de_date` FROM `events` WHERE `status` = 'enabled' ORDER BY `date` ASC";
$events_resource = mysql_query($query) or die(mysql_error());
?>


<table class="tableLine">
<tr>
<th>Wann?</th>
<th>Was?</th>
<th>Wer?</th>
<th>Wo?</th>
</tr>

<?php
$all_events = array();
$ten_events = array();

for($i = 0; $events = mysql_fetch_object($events_resource); $i++){

if($i < 9){

    $ten_events[] = $events;
}

$all_events[] = $events;
}  

$i = 0;

foreach($ten_events as $event): ?>
<tr class="row" class="show_button" href="#">
    <td><?=$event->de_date?></td>
    <td><?=$event->category?></td>
    <td><?=$event->who?></td>
    <td><?=$event->location?></td> 
</tr>
<tr>
<td class="eventinfos" colspan="4">
<?=$event->infos?>
</td>
</tr>
<?php endforeach; ?>
</table>
<script>
$(document).ready(function(){
$('.eventinfos').hide();
$('.show_button').click(function(){
$(this).closest('.row').find('.eventinfos').slideToggle();
})
})
</script>

Well, I don't really know, where to put the hided infos (using a div?) and which slideToggle-code I need to use and where to put it. I did some tries with this code, but my knowledge is not good enough.

Here is my Photoshop-example how I want it:

I hope you can help me out.

Answer 1

Try this (UPDATED):

<table class="tableLine">
<?php foreach($ten_events as $event): ?>
  <tr class="show-info" style="cursor: pointer;">
        <td><?=$event->de_date?></td>
        <td><?=$event->category?></td>
        <td><?=$event->who?></td>
        <td><?=$event->location?></td>
  </tr>
  <tr class="event-info">
        <td colspan="4"><?=$event->infos?></td>
  </tr>
<?php endforeach; ?>
</table>
<script>
  $(document).ready(function(){
    $('.show-info').on('click', function(){
      $(this).next('.event-info').slideToggle();
    })
  })​
</script>

To hide infos rows intially, specify css-rule (in your css-file or in style section in head of page):

.event-info {
    display: none;
}

See my code: http://jsfiddle.net/JEU6T/8/ UPD. See more universal code (a little change in javascript): http://jsfiddle.net/Eb3t3/3/