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