Для триггеров аккордеона, необходимо задать атрибут 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() // Текущее состояние спойлера
