将jquery slidetoggle应用于来自php的一段时间的结果

Question

The following piece of code in php, uses a while statement to output variable $the_job_id. For each of the output I want to apply jquery slidetoggle. The problem is that in my code slidetoggle works only for the first output of my while. Not working for the rest. Any idea how i should modify my code in order slidetoggle to work for each of my while outputs?

This is my php code:

<?php

$result = mysql_query("select * from `user_job` where `job_id` IN ($all_saved_job_id) ");

while($run_job = mysql_fetch_array($result)){

  $the_job_id = $run_job['job_id']; 

echo"<div id='flip'> PRESS TO SLIDE </div>";

echo"  <div id='panel'>  $the_job_id </div>";

}// end while

?>

this is my script :

<script> 

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

</script>

this is my css :

<style>

#flip{
cursor:pointer;
margin-left:100px;
}

#panel{
padding:0px;
display:none;
}       

</style>

Answer 1

id must be unique, otherwise you'll always get the first element in the page with duplicated id, so you need to use class instead:

echo"<div class='flip'> PRESS TO SLIDE </div>";

echo"  <div class='panel'>  $the_job_id </div>";

then you can use . to target elements by class name:

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next().slideToggle("slow");
    });
});

Please note that you also need to change your CSS selector using . instead of # accordingly.