启用jquery slideToggle（）可以处理来自一段时间的多个输出

Question

I have the following piece of code in php where I was trying to apply jquery slideToggle() for each youtube video presentation. My problem is that jquery slideToggle() works only for my first youtube video presentation inside my while statement. The rest of them are not working. Any idea how to fix this?

<style>
#flip
{
padding:0px;
}

#panel
{
width:475px;
margin-left:3px;
margin-bottom:5px;
padding:4px;
display:none;
box-shadow: 0 0 20px rgba(0, 30, 10, 2.8);
-webkit-box-shadow: 0 0 20px rgba(0, 10, 0, 2.8);
-moz-box-shadow: 0 0 20px rgba(0, 10, 0, 2.8);
background-color:#363636;
}   
</style>


<script>
$(document).ready(function(){
    $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>


<?php

// above code

//next starts the while and outputs from my table all rows that contains users posts
// my code outputs all youtube links in a presentation format

while(){    


 $row['comment'] = preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i", "</br>

<div id='panel'>
<object width=\"0px;\" height=\"0px;\">
    <param name=\"movie\" value=\"http://www.youtube.com/v/$1&hl=en&fs=1\"></param>
    <param name=\"allowFullScreen\" value=\"true\"></param>
    <embed src=\"http://www.youtube.com/v/$1&hl=en&fs=1?&autoplay=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" width=\"475px;\" height=\"260px;\"></embed>
</object>       
</div>

 <table style='border:1px solid lightgrey;'>
 <td bgcolor='#EBEBEB' style='vertical-align:top;'>                 
   <div id='flip' style='cursor:pointer;'>
   <div id='container'><div id='img1'><img src='http://img.youtube.com/vi/$1/default.jpg'/></div><div id='img2'><img src='img/play-button.png' style='width:40px; height:40px;'/> </div></div>
   </div>
 </td>

 <td width='355px;' bgcolor='#EBEBEB' style='vertical-align:top;'>
  <font color='#363636'><b>$video_title</b></font><font color='#545454'></br><a href='http://www.youtube.com/watch?v={$id}' target='_blank'><font color='#69aa35'><b>Youtube.com</b></font></a> - $video_perigrafh...</font><font color='#949494'>[$view_count views]</font>
 </td>
 </table>", $row['comment']);


 }
?>

Answer 1

You are using an id (#panel) and id's are supposed to be unique. The selector is based on the native GetElementByID, which returns the first match.

You should use a class (<div class="panel">) instead.

http://jsfiddle.net/gLXLr/ - illustration of the id vs class targeting

Edit: regarding the new code with classes, if your HTML is:

<div class='panel'>
    ...
</div>
<table style='border:1px solid lightgrey;'>
    <tr>
        <td bgcolor='#EBEBEB' style='vertical-align:top;'>
            <div class='flip' style='cursor:pointer;'>
                ..
            </div>
        </td>
    </tr>
</table>

The code for the toggle should be:

$(document).ready(function(){
    $(".flip").click(function() {
        $(this).parents('table').prev('.panel').slideToggle("slow");
    });
});

You can adjust it to fit your needs , of course.