CODEWITHSUNDEEP
jquery
rymill2
rymill2

Reputation: 5

jQuery show/hide 1 at a time

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/

Upvotes: 0

Views: 221

Answers (5)

TijmenK
TijmenK

Reputation: 63

$('.target-div').hide();
$('.button').click(function () {

    var $target

    for (var i=1; i<9; i++){
        $target = $('#div' + i);
        $target.slideUp('normal').removeClass('open');   
    }
   $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;
  }  
});

something like this?

Upvotes: 0

Jacco
Jacco

Reputation: 3272

You have to do a action inside your click to hide the visible element. This animation works rather nice:

$('.target-div').hide();
$('.button').click(function () {
    $('.target-div:visible').slideUp('normal', function(){ $(this).hide(); });

    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;
  }  
});

I used this Fiddle.

Upvotes: 0

Pandian
Pandian

Reputation: 9136

Change your jquery like below...

Updated Fiddle : http://jsfiddle.net/dNU92/12/

Add a line like : $(".target-div:visible").hide()

$('.target-div').hide();
$('.button').click(function () {
  var $target = $('#div' + $(this).data('target'));
  $(".target-div:visible").hide() /// this is the line i have added
  $(this).addClass('selected').siblings().removeClass('selected');
  $target.delay(300).slideToggle();    

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

Upvotes: 0

Jimbo
Jimbo

Reputation: 26624

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

Upvotes: 1

Urban Bj&#246;rkman
Urban Bj&#246;rkman

Reputation: 2105

Based on your fiddle, add a slideUp()

$('.target-div').hide();
$('.button').click(function () {
  var $target = $('#div' + $(this).data('target'));
  $('.target-div').slideUp();
  $(this).addClass('selected').siblings().removeClass('selected');
  $target.delay(300).slideToggle();    

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

Upvotes: 1

Related Questions