Для триггеров аккордеона, необходимо задать атрибут data-accordion и передать в него ссылку на элемент.
Javascript
Вы можете управлять спойлерами и аккордеонами через javascript. По умолчанию инициализация элементов производится автоматически при клике на триггер, а экземпляры классов хранятся компонентом PipUI.Storage (collapse), но их можно инициализировать и вручную с помощью класса PipUI.Collapse.
Инициализация
Для инициализации меню вручную, необходимо создать экземпляр класса PipUI.Collapse. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object.
<aclass="btn"href="#collapse-target1"rel="nofollow"id="collapse-trigger1">Показать/Скрыть</a><divclass="collapse"id="collapse-target1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div><script>let collapse1 =newPipUI.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 =newPipUI.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() // Текущее состояние спойлера
