«Гармошка» на JQuery и Mootools

Рассмотрим интересный способ показа информации на страницах сайта, в народе называемый «гармошкой». Посмотрев как он работает, думаю, вы поймете, о чём идет речь.
В нашем примере мы рассмотрим два варианта реализации — на JQuery а так же Mootools.

Для начала оформим информацию должным образом, экономим время — копируем её из примера:

<div class="accordion">
<h3>Question One Sample Text</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.
<h3>This is Question Two</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.
<h3>Another Questio here</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.
<h3>Sample heading</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.
<h3>Sample Question Heading</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus,
 commodo lacinia massa diam vel eros. Proin eget urna.
 Nunc fringilla neque vitae odio. Vivamus vitae ligula.</div>

Далее приступаем к реализациям гармошки.
Первый способ это сделать с помощью JQuery.

JQuery гармошка

Пример

Прописываем в заголовке документа следующий код:

$(document).ready(function(){
    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h3").click(function(){

        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });

;});

Первая строка добавляет класс “active”, первому тегу который в свою очередь находиться в блоке div с классом «accordion», данный класс позиционирует рисунок «иконки со стрелкой».
При клике по заголовку h3 для следующего тега p будет применен эффект slideToggle, после чего для остальных тегов будет эффект slideUp.
Следующий этап изменяется класс заголовка на “active”, после чего данный класс убирается у остальных заголовков.
Да и не забудьте о самом важном моменте, перед этим кодом необходимо подключить и сам JQuery фреймворк.

В коде, описанном немного выше функциональность достигалась с помощью JQuery, попробуем сделать подобное, но с помощью MooTools More, который в свою очередь использует плагин Fx.Accordion.

Mootools гармошка

Пример

Инициализация происходит следующими параметрами:
1. $$(‘.accordion h3′) –кликабельные теги (toggler)
2. $$(‘.accordion p’) – блоки с информацией
3. {…} – дополнительные параметры

Подобным образом, прописываем в заголовке страницы следующий код:

var myAccordion = new Fx.Accordion($$('.accordion h3'), $$('.accordion p'), {
  opacity: false,
  onActive: function(toggler, element){
    toggler.addClass('active');
  },
  onBackground: function(toggler, element){
    toggler.removeClass('active');
  }
});