Спойлер – это заглавие, при нажатии на которое под ним развертывается определенный контент.
Основные возможности
- Использование множества блоков со спойлерами
- Выключение/включение функционала на определенной ширине экрана
- Функция «аккордеон», когда в блоке может быть открыт только один спойлер
- Возможность закрытия по клику за пределами спойлера
- Возможность анимированного открытия
- Семантика и доступность
Расположение компонента
Файлы компонента находятся в папке src/components/layout/spollers, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.
Использование компонента
В нужном месте вызвать Снипет spollers (классы можно заменить на нужные). Или вручную создать структуру с соответствующими дата-атрибутами. Обратите внимание, что добавление атрибута data-fls-spollers-open для элемента details сделает спойлер активным (открытым).
Пример блока с двумя спойлерами:
<div data-fls-spollers class="spollers">
<details class="spollers__item">
<summary class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера #1</div>
</details>
<details class="spollers__item">
<summary class="spollers__title">Заголовок спойлера #2</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>В момент инициализации (включения) функционала спойлера контент будет скрыт, а к элементу с атрибутом data-fls-spollers будет добавлен класс —spoller-init
Выключение/включение функционала на определенной ширине экрана
Для того чтобы отключить/включить функционал спойлера на определенной ширине экрана, необходимо для атрибута data-fls-spollers через запятую указать нужную ширину экрана и тип:
- max (по умолчанию) — функционал включится на ширину меньше указанной
- min — функционал включится на ширине больше указанной
<div data-fls-spollers="768,min" class="spollers"> ... </div>Включение режима “аккордеон”
Для включения режима аккордеона необходимо для элемента с атрибутом data-fls-spollers добавить атрибут data-fls-spollers-one
<div data-fls-spollers data-fls-spollers-one class="spollers"> ... </div>Теперь при открытии спойлера другой открытый спойлер в блоке будет закрываться.
Управление скоростью анимации
Для того чтобы управлять временем анимации открытия/закрытия спойлера, необходимо для элемента с атрибутом data-fls-spollers добавить атрибут data-fls-spollers-speed , а в качестве значения указать время анимации в миллисекундах (по умолчанию 500).
<div data-fls-spollers data-fls-spollers-speed="1000" class="spollers"> ... </div>Закрытие при клике вне спойлера
Если необходимо закрывать спойлер(ы) при клике вне блока (“на пустом месте”), следует добавить нужному заголовку(ам) атрибут data-fls-spollers-close
<div data-fls-spollers class="spollers">
<details class="spollers__item">
<summary data-fls-spollers-close class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>Прокрутка к заголовку
Если необходимо прокрутить скролл до заголовка открытого спойлера, следует добавить нужному элементу (тег details) атрибут data-fls-spollers-scroll
<div data-fls-spollers class="spollers">
<details data-fls-spollers-scroll class="spollers__item">
<summary class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>Есть возможность более тонких настроек. Например, если нужно, чтобы скролл учел шапку сайта (когда она фиксирована), то стоит добавить атрибут data-fls-spollers-scroll-noheader .
Также, в самом атрибуте data-fls-spoller-scroll можно дописать числовое значение, которое будет учтено при скроле:
<div data-fls-spollers class="spollers">
<details data-fls-spollers-scroll="20" data-fls-spollers-scroll-noheader class="spollers__item">
<summary class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>