Jeffson Jeffson - 9 days ago 6
jQuery Question

Toggleable accordion - slideUp other active accordion when clicking the current one

I'm currently making my own plugin (Self practice) Accordion.js

every accordion has the same class and I initialized them all via jquery :
my accordion toggles/slideToggle itself when clicking multiple times and I just want that whenever I clicked another accordion , it will slideUp the previous accordion you clicked and slideToggle the another one when you clicked it multiple times

heres my code anyway



(function($) {
$.fn.accordion = function() {
var accordion = this;

accordion.find('.title').click(function() {
$(this).parent('.accordion').find('.content').slideToggle(200);
$(this).toggleClass('active');
});
return this;
};
$('.accordion').accordion();
})(jQuery);

.accordion {
width:100%;
border:1px solid #ddd;
border-radius:6px;
margin:5px 0px;
}
.accordion > .title {
padding:10px;
font-weight:bold;
}
.accordion > .title + .content {
padding:0px 10px 10px 10px;
display:none;
}
.accordion > .title > .icon {
position:relative;
right:-84%;
-webkit-transform:rotate(90deg);
color:#666;
transition:all 200ms linear;
}
.accordion > .title.active > .icon {
-webkit-transform:none;
color:#666;
transition: all 200ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="accordion">
<div class="title">Open
<i class="dropdown icon"></i> </div>
<div class="content">
<h1> Accordion 1</h1>
</div>
</div>
<div class="accordion">
<div class="title">Open
<i class="dropdown icon"></i> </div>
<div class="content">
<h1> Accordion 2</h1>
</div>
</div>
<div class="accordion">
<div class="title">Open
<i class="dropdown icon"></i> </div>
<div class="content">
<h1> Accordion 3</h1>
</div>
</div>
<div class="accordion">
<div class="title">Open
<i class="dropdown icon"></i> </div>
<div class="content">
<h1> Accordion 4</h1>
</div>
</div>




Answer

Here is what you need. The approach here is that i have added the active class to the content div also and after that removing it when toggling a pane. And slideUp all the panes not having the active class except the one on which the user clicks i.e the one having the active class. Hope it helps.

$.fn.accordion = function() {
var accordion = this;
accordion.find('.title').click(function() {
$(document).find('.title').removeClass('active');
$(document).find('.content').removeClass('active');
$(this).parent('.accordion').find('.content').slideToggle(200).toggleClass('active');
$(this).toggleClass('active');
$('.content:not(".active")').slideUp(200);
});
return this;
};

$('.accordion').accordion();
.accordion {
width:100%;
border:1px solid #ddd;
border-radius:6px;
margin:5px 0px;
}
.accordion > .title {
padding:10px;
font-weight:bold;
}
.accordion > .title + .content {
padding:0px 10px 10px 10px;
display:none;
}
.accordion > .title > .icon {
position:relative;
right:-84%;
-webkit-transform:rotate(90deg);
color:#666;
transition:all 200ms linear;
}
.accordion > .title.active > .icon {
-webkit-transform:none;
color:#666;
transition: all 200ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 1</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 2</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content"> 
<h1> Accordion 3</h1> 
</div>
</div>
<div class="accordion">
<div class="title">Open 
<i class="dropdown icon"></i> </div>
<div class="content">
<h1> Accordion 4</h1>
</div>
</div>

Fiddle Demo

Comments