VGCollapse

Сворачивающийся блок

Что делает VGCollapse

Модуль плавно показывает и скрывает связанный блок, синхронизирует управляющий элемент и позволяет объединить несколько блоков в аккордеон.

Без обязательного JavaScript

Для обычного сценария достаточно Data API в HTML.

Доступное состояние

VGCollapse обновляет aria-expanded и класс управляющей кнопки.

Жизненный цикл

События до и после перехода подходят для аналитики и дополнительной логики.

Базовый пример

Кнопка связана с панелью через data-vg-target. Текст кнопки меняется автоматически после открытия и закрытия.

Статус Готов к публикации

Последнее изменение Сегодня, 14:30

Аккордеон

Укажите общий parent у раскрываемых панелей — при открытии следующего пункта предыдущий закроется автоматически.

ПодключениеНужна ли ручная инициализация?

Нет. Клик по элементу с data-vg-toggle="collapse" обрабатывается делегированным Data API.

СостояниеКак открыть пункт из JavaScript?

Получите экземпляр через VGCollapse.getOrCreateInstance() и вызовите show().

Динамический контентМожно ли загрузить содержимое по запросу?

Да. AJAX-параметры задаются на раскрываемой панели; следующий пример показывает этот сценарий.

AJAX-контент

Контент загружается при первом открытии. Параметр data-ajax-once не допускает повторного запроса при следующих открытиях.

Отложенная загрузка История последних изменений

Ответ сервера появится в панели только после первого открытия.

Ожидание запроса…

HTML и Data API

Для стандартного раскрытия этого достаточно. Управляющий элемент может ссылаться на панель через data-vg-target или href.

<button
  type="button"
  data-vg-toggle="collapse"
  data-vg-target="#profile-details"
  aria-expanded="false"
  aria-controls="profile-details"
>
  Показать детали
</button>

<div class="vg-collapse" id="profile-details">
  <div class="profile-details">
    Дополнительная информация профиля.
  </div>
</div>

JavaScript API

Ручное управление нужно, когда состояние зависит от логики приложения. Передавайте toggle: false, чтобы конструктор не переключил панель сразу.

import {VGCollapse} from 'vgapp';

const element = document.querySelector('#profile-details');
const collapse = VGCollapse.getOrCreateInstance(element, {
  toggle: false,
  parent: null,
});

collapse.show();
collapse.hide();
collapse.toggle();

element.addEventListener('vg.collapse.shown', () => {
  console.log('Панель открыта');
});

// Когда экземпляр больше не нужен:
collapse.dispose();

CSS-настройка

VGCollapse уже содержит анимацию и служебные состояния. Пользовательскому CSS обычно достаточно оформить кнопку, контент и публичные переменные аккордеона.

Служебные классы

.show обозначает открытую панель, .vg-collapsed — закрытую кнопку, а .vg-collapsing существует только во время перехода. Последний класс не нужно добавлять вручную.

.profile-accordion {
  --vg-accordion-border: 1px solid var(--vg-border-default);
  --vg-accordion-border-radius: var(--vg-radius-lg);
  --vg-accordion-padding: 1rem;
}

.profile-accordion .vg-accordion-button {
  width: 100%;
  background: var(--vg-surface-bg);
  color: var(--vg-text-primary);
  text-align: left;
}

.profile-accordion .vg-accordion-button:not(.vg-collapsed) {
  background: var(--vg-surface-muted-bg);
}

События и параметры

Короткий справочник для сценариев, которые выходят за рамки обычного Data API.

Основные параметры

toggle: Автоматически переключить панель при создании экземпляра. По умолчанию true.
parent: Общий контейнер для режима аккордеона.
ajax: route, target, method, loader, once и output для отложенной загрузки.

События

vg.collapse.show: Перед началом открытия; событие можно отменить.
vg.collapse.shown: После завершения анимации открытия.
vg.collapse.hide: Перед началом закрытия; событие можно отменить.
vg.collapse.hidden: После завершения анимации закрытия.
vg.collapse.loaded: После завершения AJAX-запроса.