jquery - toggle divs, but only have one shown at once -

i have thumbnails slidetoggle hidden div. want 1 stay open @ once though. when next thumbnail clicked, open div closes , new 1 opens.

i doing show , hide, looks bad because loose animation slidetoggle.

so what's best way hide toggled divs , open new one?

here html:

<div id="maincontainer">   <div id="rowone">   <img src="illinoislottery_thumbnail_taller.jpg" id="rowoneleftimage" />   <img src="illinoislottery_thumbnail_taller.jpg" id="rowonemiddleimage" />   <img src="illinoislottery_thumbnail_taller.jpg" id="rowonerightimage"/>   </div>    <div id="rowoneleftimagehidden">       information left image in first row.   </div>    <div id="rowonemiddleimagehidden">       information middle image in first row.   </div>      <div id="rowonerightimagehidden">       information right image in first row.   </div> 

and jquery toggle (but multiple divs can opened this...):

$('#rowoneleftimage').click(function(){         $("#rowoneleftimagehidden").slidetoggle();     });     $('#rowonemiddleimage').click(function(){         $("#rowonemiddleimagehidden").slidetoggle();     });     $('#rowonerightimage').click(function(){         $("#rowonerightimagehidden").slidetoggle();     }); 

put class on expandable divs, say, expandable.

<div id="rowoneleftimagehidden" class="expandable">   information left image in first row. </div>  <div id="rowonemiddleimagehidden" class="expandable">   information middle image in first row. </div>   <div id="rowonerightimagehidden" class="expandable">   information right image in first row. </div> 

you can collapse of them referencing class now, , using slideup() , slidedown().

$('#rowoneleftimage').click(function(){     $(".expandable").slideup();     $("#rowoneleftimagehidden").slidedown(); }); $('#rowonemiddleimage').click(function(){     $(".expandable").slideup();     $("#rowonemiddleimagehidden").slidedown(); }); $('#rowonerightimage').click(function(){     $(".expandable").slideup();     $("#rowonerightimagehidden").slidedown(); 

you avoid duplicate code little creative use of data- elements, having images include data-target element id div want them expand, wouldn't need write n functions n images.

to wait until close before opening can use delay, or can do

$(".expandable").slideup(function () {     // called once animation completes     if ($(this).is("#rowoneleftimagehidden")) {         $(this).slidedown();     } });