Creating a custom jQuery accordion
I am making a traditional accordion. My problem is that I don't know how the slideUp
div is, which is slideDown
, when I click on another heading, there the div is not yet slideDown
.
Here is my code:
CSS
.grid-l1{ width: 500px; height: auto; min-height: 500px; overflow: hidden; padding: 10px; background: #000; }
.header{ width: 100%; text-align: left; background: #fff; color: #000; font-size: 14px; text-transform: uppercase; font-weight: bold; padding: 5px; cursor: pointer; margin: 0px !important; }
.level-box{ width: 100%; height: auto; overflow: hidden; background: #ededed; padding: 10px; display: none; }
.box-a1{ width: 100%; height: auto; overflow: hidden; margin: 5px 0px; }
HTML:
<div class="grid-l1">
<div class="box-a1">
<h2 class="header">
Header
</h2>
<div class="level-box">
<label>Test Input</label>
<input type="text">
</div>
</div> <!-- box-a1 -->
<div class="box-a1">
<h2 class="header">
Header 2
</h2>
<div class="level-box">
<label>Test Input</label>
<input type="text">
</div>
</div> <!-- box-a1 -->
<div class="box-a1">
<h2 class="header">
Header 3
</h2>
<div class="level-box">
<label>Test Input</label>
<input type="text">
</div>
</div> <!-- box-a1 -->
</div>
JS:
$('body').on('click', '.header', function() {
$(this).closest('.box-a1').find('.level-box').slideToggle();
});
Should I use slideToggle
? I will be grateful to everyone who answers you guys will do. And feel free to teach me, I'm still new to the jQuery world :) Thanks a lot sir.
source to share
try it
$('body').on('click', '.header', function(e) {
$('.box-a1').find('.level-box').stop().slideUp();
$(this).closest('.box-a1').find('.level-box').stop().slideToggle();
});
.grid-l1{ width: 500px; height: auto; min-height: 500px; overflow: hidden; padding: 10px; background: #000; }
.header{ width: 100%; text-align: left; background: #fff; color: #000; font-size: 14px; text-transform: uppercase; font-weight: bold; padding: 5px; cursor: pointer; margin: 0px !important; }
.level-box{ width: 100%; height: auto; overflow: hidden; background: #ededed; padding: 10px; display: none; }
.box-a1{ width: 100%; height: auto; overflow: hidden; margin: 5px 0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grid-l1">
<div class="box-a1">
<h2 class="header">
Header
</h2>
<div class="level-box">
<label>Test Input</label>
<input type="text">
</div>
</div> <!-- box-a1 -->
<div class="box-a1">
<h2 class="header">
Header 2
</h2>
<div class="level-box">
<label>Test Input</label>
<input type="text">
</div>
</div> <!-- box-a1 -->
<div class="box-a1">
<h2 class="header">
Header 3
</h2>
<div class="level-box">
<label>Test Input</label>
<input type="text">
</div>
</div> <!-- box-a1 -->
</div>
source to share
You can use .siblings()
to move other fields:
$('body').on('click', '.header', function() {
var $box = $(this).closest('.box-a1');
$box.siblings().find('.level-box').stop().slideUp();
$box.find('.level-box').stop().slideToggle();
});
As @ScottSelby points out in a comment, the animation must be stopped with .stop()
before watching new ones. The user will have to click quickly, but the animations are on the same queue item unless stopped.
source to share
You can just slideUp
set all the fields of the level on first run. And the slideDown
active item that was clicked.
$('body').on('click', '.header', function() {
$('.level-box').slideUp();
var current = $(this).closest('.box-a1').find('.level-box');
if (current.is(':visible')) {
current.slideUp();
} else {
current.slideDown();
}
});
source to share