Спойлеры
Общая информация
Вы можете скрывать содержимое с помощью спойлеров.
<a href="#" rel="nofollow" data-collapse="#collapse-trigger-1">Показать/Скрыть</a>
<div class="collapse" id="collapse-trigger-1">
Hidden text
</div>
<a href="#" class="collapse-active" rel="nofollow" data-collapse="#collapse-trigger-2">Показать/Скрыть</a>
<div class="collapse collapse-active" id="collapse-trigger-2">
Hidden text
</div>
Для определения триггера, необходимо добавить атрибут data-collapse
и передать в него ссылку на элемент, который необходимо открыть или закрыть.
По умолчанию элементы являются неактивными и закрытыми, чтобы это изменить, добавьте триггеру и блоку класс .collapse-active
.
Аккордеон
Для создания зависимых спойлеров, разметка отличается и является более сложной, чем обычные спойлеры.
<div class="accordion">
<div class="accordion-id active">
<a href="#" class="accordion-trigger" data-accordion="#accordion-item-1">
Accordeon #1
<i class="accordion-trigger-icon"><i class="fa-solid fa-angle-down"></i></i>
</a>
<div class="accordion-target" id="accordion-item-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.
</div>
</div>
<div class="accordion-id">
<a href="#" class="accordion-trigger" data-accordion="#accordion-item-2">
Accordeon #2
<i class="accordion-trigger-icon"><i class="fa-solid fa-angle-down"></i></i>
</a>
<div class="accordion-target" id="accordion-item-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.
</div>
</div>
<div class="accordion-id">
<a href="#" class="accordion-trigger" data-accordion="#accordion-item-3">
Accordeon #3
<i class="accordion-trigger-icon"><i class="fa-solid fa-angle-down"></i></i>
</a>
<div class="accordion-target" id="accordion-item-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.
</div>
</div>
</div>
Для триггеров аккордеона, необходимо задать атрибут data-accordion
и передать в него ссылку на элемент.
Javascript
Вы можете управлять спойлерами и аккордеонами через javascript. По умолчанию инициализация элементов производится автоматически при клике на триггер, а экземпляры классов хранятся компонентом PipUI.Storage (collapse), но их можно инициализировать и вручную с помощью класса PipUI.Collapse.
Инициализация
Для инициализации меню вручную, необходимо создать экземпляр класса PipUI.Collapse. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object.
<a class="btn" href="#collapse-target1" rel="nofollow" id="collapse-trigger1">Показать/Скрыть</a>
<div class="collapse" id="collapse-target1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<script>
let collapse1 = new PipUI.Collapse('#collapse-target1', {
triggers: ['#collapse-trigger1']
});
</script>
Первый параметр - объект или строка ссылающаяся на элемент.
Второй параметр - объект опций.
Опции
// Выводить в консоль отладку
debug: false,
// Массив триггеров
triggers: [],
// Настройки анимаций
animation: {
// Анимация появляения
show: {
// Тип анимации
type: 'slideDown'
// Скорость анимации в миллисекундах
duration: 200
}
// Анимация исчезания
hide: {
// Тип анимации
type: 'slideUp'
// Скорость анимации в миллисекундах
duration: 200
}
}
// Спойлер является аккордеоном
accordion: false,
// Сделать видимым по умолчанию
defaultVisible: false,
// Класс открытого блока
toggleTargetClass: 'collapse-active',
// Класс активного триггера
toggleTriggerClass: 'active',
// Функция обратного вызова при начале появления
showStartCallback: undefined,
// Функция обратного вызова при начале исчезания
hideStartCallback: undefined,
// Функция обратного вызова при окончании появления
showEndCallback: undefined,
// Функция обратного вызова при окончании исчезания
hideEndCallback: undefined
Методы
let collapse = new PipUI.Collapse('#collapse');
collapse.getID() // Вернет уникальный идентификатор спойлера
collapse.setOptions(object) // Изменить опции спойлера
collapse.getOptions() // Получить опции спойлера
collapse.toggle(callback) // Скрыть или отобразить содержимое спойлера
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
collapse.hide(callback) // Скрыть содержимое спойлера
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
collapse.show(callback) // Показать содержимое спойлера
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
collapse.update() // Обновить содержимое
collapse.isOpen() // Текущее состояние спойлера
Last updated