Сделаем структуру для аккордеона в index.html, в которой будет родительский класс akk, внутри будет содержание, оформим тегом dl.
Внутри тега dl будет заголовок в теге dt и текст в теге dd.
Продублируем три раза, добавив еще элементы гармошки.
Посмотрим, что получилось в браузере.
Код в index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="akk"> <dl> <dt>ЗАГОЛОВОК1</dt> <dd>Далеко-далеко за словесными горами в стране.</dd> </dl> <dl> <dt>ЗАГОЛОВОК2</dt> <dd>Далеко-далеко за словесными горами в стране, гласных и согласных.</dd> </dl> <dl> <dt>ЗАГОЛОВОК3</dt> <dd>Далеко-далеко за словесными.</dd> </dl> </div> |
Сделаем для открытого заголовка цвет синий.
Назначим цвет классу .akk .active. В main.sass.
|
1 2 |
.akk .active color: blue |
Скрипт для аккордеона
Рассмотрим из чего состоит код яваскрипта в common.js.
Изначально dd вложенный текст прячем hide ().
Находим предыдущий тег prev (). Предыдущим тегом является заголовок dt и инициализируем событие клика мышкой на нем click.
Дальше аккордеон dd контент, который не является текущим not (this), сворачиваем slideUp ().
Дальше (this).next () следующий текст если не видимый not (:visible), то мы его разворачиваем slideDown ().
Код аккардиона в common.js.
|
1 2 3 4 5 6 |
$(function() { $(".akk dd").hide().prev().click(function() { $(this).parents(".akk").find("dd").not(this).slideUp().prev().removeClass("active"); $(this).next().not(":visible").slideDown().prev().addClass("active"); }); }); |