jquery切换问题

Question

I am using jquery toggle to show a div with content. Not sure how to explain the issue I am having, but if you go to my test page and click on the first link for Similar Movies (it coincides with the movie 500 Days of Summer) you'll see a panel open with the similar movies. If you go to the next Similar Movies link (coinciding with 10 Things I Hate About You) you'll see that it still controls the first set of movies, meaning it toggles the panel up and down. In fact, all of the Similar Movies links control the first panel. Not sure how to fix this. *REMOVED LINK- NO LONGER NECESSARY- THANKS!

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

<div class="flip">Similar Movies
</div><!-- end of flip-->

    <div id="panel">
similar movies are echoed here from a database using php...
</div>

Answer 1

Instead of using an ID for your panels, use a class, like this:

<div class="panel">
  similar movies are echoed here from a database using php...
</div>

Then in your jQuery:

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

Using the same ID on more than one element is not recommended, and will especially present problems when using jQuery.