> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/collapse.md).

# Спойлеры

## Общая информация <a href="#general-information" id="general-information"></a>

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

```html
<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>
```

{% embed url="<https://codepen.io/pipui/pen/BaPqWYz>" %}
Пример работы кода выше
{% endembed %}

Для определения триггера, необходимо добавить атрибут <mark style="color:orange;">`data-collapse`</mark> и передать в него ссылку на элемент, который необходимо открыть или закрыть.

По умолчанию элементы являются неактивными и закрытыми, чтобы это изменить, добавьте триггеру и блоку класс <mark style="color:orange;">`.collapse-active`</mark>.

## Аккордеон <a href="#accordion" id="accordion"></a>

Для создания зависимых спойлеров, разметка отличается и является более сложной, чем обычные спойлеры.

```html
<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>
```

{% embed url="<https://codepen.io/pipui/pen/ExpdmLx>" %}
Пример работы кода выше
{% endembed %}

Для триггеров аккордеона, необходимо задать атрибут <mark style="color:orange;">`data-accordion`</mark> и передать в него ссылку на элемент.

## Javascript

Вы можете управлять спойлерами и аккордеонами через javascript. По умолчанию инициализация элементов производится автоматически при клике на триггер, а экземпляры классов хранятся компонентом PipUI.Storage (collapse), но их можно инициализировать и вручную с помощью класса PipUI.Collapse.

### Инициализация <a href="#init" id="init"></a>

Для инициализации меню вручную, необходимо создать экземпляр класса PipUI.Collapse. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object.

```html
<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>
```

{% embed url="<https://codepen.io/pipui/pen/qByJjrj>" %}
Пример работы кода выше
{% endembed %}

Первый параметр - объект или строка ссылающаяся на элемент.&#x20;

Второй параметр - объект опций.

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
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
```

### Методы <a href="#methods" id="methods"></a>

```javascript
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() // Текущее состояние спойлера
```