Август 2017
Автор: Рубрика: Верстка Комментариев нет

Создание аккордеона для сайта


Создание аккордеона для сайта

Сделаем структуру для аккордеона в index.html, в которой будет родительский класс akk, внутри будет содержание, оформим тегом dl.

Внутри тега dl будет заголовок в теге dt и текст в теге dd.

Продублируем три раза, добавив еще элементы гармошки.

Посмотрим, что получилось в браузере.
аккордеона в index.html

Код в index.html.

Сделаем для открытого заголовка цвет синий.

Назначим цвет классу .akk .active. В main.sass.

Скрипт для аккордеона

Рассмотрим из чего состоит код яваскрипта в common.js.

Изначально dd вложенный текст прячем hide ().

Находим предыдущий тег prev (). Предыдущим тегом является заголовок dt и инициализируем событие клика мышкой на нем click.

Дальше аккордеон dd контент, который не является текущим not (this), сворачиваем slideUp ().

Дальше (this).next () следующий текст если не видимый not (:visible), то мы его разворачиваем slideDown ().

Код аккардиона в common.js.

Код аккардиона в common.js.

Комментариев нет