Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
4 г. назад

Простой аккордеон на JQuery

Цель: сделать простой аккордеон на JQuery.

Структура аккордеона:

<div id="navigation">
  <h3 class="head"><a href="javascript: void(0)">Why should I buy gold?</a></h3>
  <div>So why don’t you acquire your own gold reserve?</div>
  <h3 class="head"><a href="javascript: void(0)">What is allocated gold? </a></h3>
  <div style="display: none;"><p>Allocated gold means that insuring it and depositing in a highly secure vault in Dubai.</p></div>
</div>

Решение:

jQ('#navigation > div').hide();
jQ('#navigation > h3').click(function () {
  var tru = jQ(this).hasClass('active');
  if (tru === false) {
    jQ('#navigation > h3').removeClass('active');
    jQ(this).addClass('active');
    jQ('#navigation  > div').hide('fast');
    var nextDiv = jQ(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. При клике на активный пункт не происходит события.

Комментарии

#hawk15.03.2013 09:28
Спасибо! Самая лаконичная и удачная реализация аккордеона на jQuery из всех, что мне удалось найти! Ответить

Добавить комментарий

Наверх