Спойлеры

Общая информация

Вы можете скрывать содержимое с помощью спойлеров.

<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() // Текущее состояние спойлера
PreviousХлебные крошкиNextГалерея

Last updated