Question

I have created something where upon clicking a div/button, it opens a separate div and its contents. I am looking to have all of the non-targeted items close or slide up upon clicking one of the button divs.

Long story short, I want only 1 ‘target-div’ open at a time. How do I accomplish this? (link to fiddle below code)

$('.target-div').hide();
$('.button').click(function () {
  var $target = $('#div' + $(this).data('target'));

  $(this).addClass('selected').siblings().removeClass('selected');
  $target.delay(300).slideDown();    

 if($target.is(':visible')){
  $(this).removeClass('selected');
  $target.slideUp('normal').removeClass('open');
  return false;
 }  
});

http://jsfiddle.net/dNU92/8/

Answer 1

The following code performs what you want – hiding the other divs that are open when you click another one.

$('.target-div').hide();
$('.button').click(function () {
    var $target = $('#div' + $(this).data('target'));

    $(this).addClass('selected').siblings().removeClass('selected');
    $target.delay(300).slideToggle();    


    if($target.is(':visible')){
        $(this).removeClass('selected');
        $target.slideUp('normal').removeClass('open');
        return false;
    }
    else
    {  
        $('.target-div:visible').not($(this)).removeClass('open').slideUp();
    }
});

The only addition here was:

$('.target-div:visible').not($(this)).removeClass('open').slideUp();

Here’s your updated JSFiddle