jquery only works on top SQL search result when using ' echo ' in PHP

I've written a search code that displays data from my MySql database via PHP. It's a list of books with descriptions, prices, topics covered etc... Some of it is basic and needs to be seen immediately (e.g. title, price), some of it is more complex and doesn't need to be on display unless called for by the user (e.g description, reviewer etc...).

I'd like this to be done by clicking on the basic text and having the more complex text drop down. I've chosen the Jquery 'slidetoggle' function, enclosing the basic text in the 'basic' div, that when clicked on, brings down the second 'more' div.

It works a treat for the top result, but doesn't work for any further outputs, almost as if the script has stopped after the first set of divs, and not carried on working for the oth开发者_运维技巧er results.

I hope that makes sense, here is my code -

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

$(document).ready(function(){
$("#basic").click(function(){
        $("#more").slideToggle("slow");
  });
});


</script>

and for the echo -

    echo "

<div id='basic'>

<img src='/ctr/$pic'>
$name - $topic - $format - $mark - $price



<div id='more' style='display:none;'>
$description - $gender - $age - $reviewer
</div>

</div>
<hr>

";

I've taken most of the formatting out to make it clearer, and I appreciate clicking a div is perhaps not the best way to show more data.

I've tried putting the java inside the "echo" section as well, but again this just meant the top result worked, but no others.

I'm guessing I might need some sort of loop function, an alteration with the num_rows instruction or a way to rename each div individually, i.e. basic1, basic2, basic3, but I'm sure there must be an easier way to do this.

Any help or links to tutorials / other answered questions much appreciated.

I imagine this only works for the first item because you are using an id when you should be using a class for your div. ID's should only be used once on a page whereas classes can be used multiple times. Try this jQuery:

$(document).ready(function(){
$(".basic").click(function(){
        // restrict selection to just the children of this (.basic div)
        $(".more", $(this)).slideToggle("slow");
  });
});

With this php:

echo "
    <div class='basic'>
        <img src='/ctr/$pic'>
        $name - $topic - $format - $mark - $price
        <div class='more' style='display:none;'>
        $description - $gender - $age - $reviewer
        </div>
    </div>
    <hr>
";

Only the top result works because you are using an id as a selector and this in jquery retruns only one result (ids should be unique), you could do:

jquery

$(document).ready(function(){
$(".toggle").click(function(){
        $(this).find("#more").slideToggle("slow");
  });
});

php:

     echo "

<div class='toggle'>

<img src='/ctr/$pic'>
$name - $topic - $format - $mark - $price



<div id='more' style='display:none;'>
$description - $gender - $age - $reviewer
</div>

</div>
<hr>

";

In this way you attach an event to a class and each time you press that div, it looks for a div wit id=more in his descendants - this works for any number of divs on your page

look at the example http://jsbin.com/etawav/edit#preview