CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
anon3776
anon3776

Reputation: 33

jquery show div when clicked for multiple entry from query

Jquery:

 <script>
 $(document).ready(function(){
   $("#title").click(function(){
     $("#desc").toggle(500);
   });
 });
 </script>

HTML:

 <?php
   echo '<table width="100%">';
   while ($rrow=mysql_fetch_row($result)) {
    $id = $rrow[0];
    $pos = $rrow[1];
    if (strlen($rrow[2])) { $valid = date_dmy($rrow[2]); }
    $des = $rrow[3];
    echo ' <tr>';
    echo '  <td class="c1"><IMG SRC="gfx/icon-ppl.gif">&nbsp;'; printf("<a href='#' id='title' class='topic_shortnews'><B>%s</B></a>",$position);;
    echo '</tr><tr>';
    echo ' <td class="s1">'; printf ("<div id='desc' style='display: none;'>%s</div>",$description); echo '</td>';
    echo '</tr>';
   }
   echo '</table>';
 ?>

This code display few entries from database. What I'm trying to achieve is, when I clicked the title ID, it will show the description in desc ID. But above code works only on the first entry. The rest entries doesn't toggle to hide/show when I clicked the link. How to solve it?

Thanks

Upvotes: 0

Views: 73

Answers (2)

Ryan Nghiem
Ryan Nghiem

Reputation: 2438

You don't should use ID elements.You should class element

You can code

`

<script>
 $(document).ready(function(){
   $(".topic_shortnews").click(function(){
     $(this).closest("tr").next().find("#desc").toggle(500);
   });
 });
 </script>

`

AND DEMO HERE

Upvotes: 0

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

first , use a class instead of id

then 

$(document).ready(function(){
   $(".title").click(function(){
     $(this).closest('tr').next().find(".desc").toggle(500);
   });
 });

Upvotes: 1

Related Questions