SlideToggle problem

SlideToggle problem

Hi guys,

I am fairly new to jQuery, so need your help with this problem!

I have a set list of trainers I am displaying on my website from a mysql database, each trainers name on the page is hyperlinked, and clicking their name slides down a div containing a more detailed view of that person (ie. tel, mob, web details). Upon calling the trainers, each one is assigned a id using an array to keep it dynamic, but this is where I am running into problems with my jquery.

I had it setup fine so when I clicked a trainers the div worked sliding down and click it once again to slide up, but the client wanted it to make it so when you clicked a trainer, if a trainer was alread open that would slide down, but my code doesnt work, and as you can see, when you click on a trainer thats already open it slides back down, any help? (apologies for the bad grammar)

here is my code....

// Trainers
$(".open").click(function(){
      
   // get the handle of the clicked element
   var clickedLink = $(this);
   // get its id
   var link_id = clickedLink.attr("id");
   // construct the fieldset id
   var largebox_id = "large" + link_id;
   // select the fieldset then hide it - now I'm stuck
   
   $(".trainer-slide").slideUp("slow");   
   $("#" + largebox_id).slideToggle("slow");   
      
});


here is what calls the trainers...

echo "<div class=\"trainer-box\" id=\"small$i\">\n";
   echo "<h2>$trainerName</h2>\n";
   echo "<a href=\"#\" id=\"$i\" class=\"open\" onclick=\"return false;\"><img src=\"$DomainPath/images/trainer-box-hover.gif\" alt=\"More Details...\" /></a>\n";      
echo "</div>\n";
      
echo "<div class=\"trainer-slide\" id=\"large$i\">\n";
   echo "<div class=\"trainer-slide-top\"></div>\n";
   echo "<div class=\"trainer-slide-mid\">\n";
         
      //SHOW TRAINER DETAILS
      echo "<div class=\"trainer-details\">\n";
            
         //echo "<p>ID: $trainerID</p>\n";
         echo "<p><strong>Email:</strong> <a href=\"mailto:$trainerEmail\">$trainerEmail</a></p>\n";
         if($trainerTel) {
            echo "<p><strong>Tel:</strong> $trainerTel</p>\n";
         }
         if($trainerMob) {
            echo "<p><strong>Mobile:</strong> $trainerMob</p>\n";
         }
         if($trainerWeb) {
            echo "<p><strong>Website:</strong> <a href=\"$trainerWeb\" target=\"_blank\">$trainerWeb</a></p>\n";
         }
         if($trainerArea) {
            echo "<p><strong>Area's Covered:</strong> $trainerArea</p>\n";
         }
                     
      echo "</div>\n";
            
         
   echo "</div>\n";
   echo "<div class=\"trainer-slide-bot\"></div>\n";

echo "</div>\n";


$i is the value from the while loop which gives each trainer div a unique id

here is the page....

http://development.mercury-design.co.uk ... ainers.php