CODEWITHSUNDEEP
javascriptjqueryslidetoggle
micah
micah

Reputation: 1975

how do i use slidetoggle and allow only one div open at a time?

Code: http://codepen.io/anon/pen/sumIx

$('.module article').hide();
});
$('.module-content, .module-photo').click(function() {
  for (var i = 0; i < 5; i++) {
     $('.module article').slideUp();
  } $(this).parent().children('article').slideToggle('slow');
});

If you click on any of the boxes, the previously active div closes as expected.

When you try to close the same div which is active, it opens right back up. How do I keep everything else the same but correct the behavior so that it doesn't reopen?

Upvotes: 3

Views: 4372

Answers (2)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70139

jQuery iterates element collections naturally so your loops are irrelevant in this case. Here's the commented updated code:

$('.module-content').click(function() {
    //stores a reference to the clicked section's article
    var article = $(this).parent().children('article');
    //hides all other articles
    $('.module article').not(article).slideUp();
    //toggles the clicked one
    article.slideToggle('slow');
});

http://codepen.io/anon/pen/dgJDr

Upvotes: 4

Ram
Ram

Reputation: 144659

Try this:

$('.module-content').click(function() {
   var $this = $(this).closest('section').find('article');
   $('.module article').not($this).slideUp();
   $this.slideToggle('slow');
});

http://codepen.io/anon/pen/DBirp

Upvotes: 7

Related Questions