CODEWITHSUNDEEP
javascriptjqueryaccordion
Ordog
Ordog

Reputation: 173

Select all but this element

I have a few accordions setup and I'd like only one to be open throughout the whole page. I thought that the .not() method would achieve what I wanted however it is just immediately closing the current div.

Here is what I have if anyone can spot where I've gone wrong:

JS

$( document ).ajaxComplete(function() {
$('.accordion-toggle').click(function(){

  //Expand or collapse this panel
  $(this).next().stop().slideToggle('1000');
  $(this).toggleClass('active').siblings().removeClass('active');

  //Hide the other panels
  $('.accordion-content').not(this).slideUp('1000');

});
});

HTML

<div id="location1">

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

</div>



<div id="location2">

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

</div>

CSS

.accordion-content {
  display: none;
  padding:20px 0;
  border-bottom: 1px solid #d4d5d7;
}

.accordion-content.default {display: block;}

.accordion-toggle {
  cursor: pointer;
  font-size:18px;
  padding:10px 0;
  margin:0;
  border-bottom:1px solid #d4d5d7;
  position:relative;
}

Upvotes: 0

Views: 132

Answers (2)

mcon
mcon

Reputation: 664

You were pretty close. You should change this line

$('.accordion-content').not(this).slideUp('1000');

To This:

$('.accordion-toggle').not(this).next().slideUp('1000');

Since your click function is applied to the accordion-toggle class, you have to target that class since this is an accordion-toggle class element, and you want to filter out all elements that are not this object. This will also force you to have to use the .next() method since you're looking to slide the next element in the DOM.

Edit 1:

In order to remove the active class across all of the #locationX divs, you should separate this line

$(this).toggleClass('active').siblings().removeClass('active');

Into this:

$('.active').not(this).removeClass('active');
$(this).toggleClass('active');

The way it was written previously, after the active class is toggled on the current element, it will only remove that class from all sibling elements, which won't properly affect elements in the other divs. It makes the script a bit longer, but it will remove all of the active classes before toggling the class on the current element.

Edit 2:

The simplest solution for the whole function is probably the following:

$('.accordion-toggle').click(function(){

    //Expand or collapse this panel
    $(this).next().stop().slideToggle('1000');  

    //Hide the other panels
    $('.accordion-toggle').not(this).removeClass('active').next().slideUp('1000');
    $(this).toggleClass('active'); 

});

Upvotes: 2

Marc Rohloff
Marc Rohloff

Reputation: 1352

In your case this is the toggle not the content (it would also have to be $(this) not just this, so:

$('.accordion-content').not(this).slideUp('1000');

Will match all accordion content.

You could try:

var $content = $(this).next('.accordion-content');   
$('.accordion-content').not($content).slideUp('1000');

As a note, I would set var $this = $(this); at the beginning of your handler so that you are not repeatedly creating jQuery objects which is relatively expensive.

Upvotes: 0

Related Questions