Простой аккордеон на JQuery
Цель: сделать простой аккордеон на JQuery.
Структура простого аккордеона:
<div id="navigation">
<h3 class="head active">Why should I buy gold?</h3>
<div>So why don’t you acquire your own gold reserve?</div>
<h3 class="head">What is allocated gold?</h3>
<div style="display: none;"><p>Allocated gold means that insuring it and depositing in a highly secure vault in Dubai.</p></div>
</div>
Решение на JQuery:
$('#navigation > div').hide();
$('#navigation > h3').on('click', function () {
var tru = $(this).hasClass('active');
if (tru === false) {
$('#navigation > h3').removeClass('active');
$(this).addClass('active');
$('#navigation > div').hide('fast');
var nextDiv = $(this).next();
var visibleSiblings = nextDiv.siblings('div:visible');
if (visibleSiblings.length) {
visibleSiblings.slideUp('fast', function () {
nextDiv.slideToggle('fast');
});
} else {
nextDiv.slideToggle('fast');
}
}
});
Версия v.2. Добавлено/исправлено:
- При клике на активный пункт простого аккордеона на JQuery не происходит события.
$('.panel-head > h2').click(function() {
var targetElem = $(this),
status = targetElem.hasClass('open');
$('.panel-head > h2').removeClass('open');
$('.panel-body').slideUp('fast');
if(!status) {
targetElem.addClass('open');
targetElem.parent().next().slideDown('fast');
}
});
вкінці не закрита кругла дужка click(function () {