Question

I have about 20 buttons on a page. I have set them up with jquery to slide toggle to show and hide a div. It works well but only if the same button is used to close the div before selecting a new div. I want that if a button is clicked it will slide up open divs, before it slides down its own div. Right now if a div is still showing, and a different button is clicked, the open div wont close.

I think there are too many buttons to make an if function to test each div by name if open, and then slide up. is there a general slide up all open divs?

If I add a class and use css to display:block, I dont get animation, so I am using slidetoggle. I am happy to redo my code if there is a better way? Is there a way to close the open divs?

$(document).ready(function(){
  $('.show1').click(function(){
    $(".row1").slideToggle();
  });

  $('.show2').click(function(){
    $(".row2").slideToggle();
  });

  $('.show3').click(function(){
   $(".row3").slideToggle();
  });
});

Answer 1

The easiest way I see is to add a class (like row) to all your div and to hide them using
$(".row").not(".rowX").slideUp(); The not rowX is there to keep the toggle alive (and with that update, order doesn’t matter ;)).

That’ll end up like:

$('.show3').click(function(){
   $(".row").not(".row3").slideUp();
   $(".row3").slideToggle();
});