• Главная  
• Блог  
• Простой аккордеон на JQuery

Простой аккордеон на 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. Добавлено/исправлено:

1. При клике на активный пункт простого аккордеона на JQuery не происходит события.