Question

I have some thumbnails that slideToggle a hidden div. I only want one to stay open at once though. So when the next thumbnail is clicked, the open div closes and then the new one opens.

I was doing this with show and hide, but it looks bad because I loose the animation from slideToggle.

So what’s the best way to hide all toggled divs and then open the new one?

Here is my 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">
      This is information for the left image in the first row.
  </div>

  <div id="rowOneMiddleImageHidden">
      This is information for the middle image in the first row.
  </div> 

   <div id="rowOneRightImageHidden">
      This is information for the right image in the first row.
  </div>

and the Jquery to Toggle (But multiple divs can be opened with this…):

$('#rowOneLeftImage').click(function(){
        $("#rowOneLeftImageHidden").slideToggle();
    });
    $('#rowOneMiddleImage').click(function(){
        $("#rowOneMiddleImageHidden").slideToggle();
    });
    $('#rowOneRightImage').click(function(){
        $("#rowOneRightImageHidden").slideToggle();
    });

Answer 1

Put a class on all the expandable divs, say, expandable.

<div id="rowOneLeftImageHidden" class="expandable">
  This is information for the left image in the first row.
</div>

<div id="rowOneMiddleImageHidden" class="expandable">
  This is information for the middle image in the first row.
</div> 

<div id="rowOneRightImageHidden" class="expandable">
  This is information for the right image in the first row.
</div>

You can collapse all of them by referencing the class now, and using slideUp() and slideDown().

$('#rowOneLeftImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneLeftImageHidden").slideDown();
});
$('#rowOneMiddleImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneMiddleImageHidden").slideDown();
});
$('#rowOneRightImage').click(function(){
    $(".expandable").slideUp();
    $("#rowOneRightImageHidden").slideDown();

You could probably avoid all this duplicate code with a little creative use of data- elements, like having the images include a data-target element with the id the div you want them to expand, then you wouldn’t need to write n functions for n images.

To wait until they close before opening you can use a delay, or you can do

$(".expandable").slideUp(function () {
    // this is called once the animation completes
    if ($(this).is("#rowOneLeftImageHidden")) {
        $(this).slideDown();
    }
});