1. Домашняя страница
  2. JavaScript
  3. Компоненты
  4. Аккордеон

Аккордеон

Компонент для переключения видимости контента по определенным группам (аккордеон)

Превью

Содержимое блока 0

Содержимое блока 1

Содержимое блока 2

Подключение

В случае если компонент поддерживает несколько способов подключения, используйте только тот, который больше подходит для проекта

Внимание!

Перед подключением компонента убедитесь, что все необходимые для требуемого компонента зависимости установлены и подключены!

Используя Bitrix

Для подключения компонента используется стандартный метод для работы с расширениями CJSCore::Init

php

CJSCore::Init(['welpodron.core.accordion']);

Прямое подключение

Для подключения компонента используется комбинация тегов script и link

html

...
Здесь находятся подключение всех стилей, от которого зависит текущий подключаемый скрипт
...
<link rel="stylesheet" href="Путь к локально размещенному файлу стилей компонента">
...
Здесь находятся подключение всех зависимых от данного скрипта стилей
...
</head>

Использование

Компонент работает с помощью специальных HTML атрибутов, не забывайте указывать их в соответствии с документацией перед инициализацией компонента в JavaScript

HTML

Базовый HTML управляемого элемента (основной компонент)

html

<div 
  data-w-accordion
  data-w-accordion-id="COMPONENT_ID"
>
  Содержимое управляемого элемента (основной компонент)
</div>
АтрибутЗначенияОписание
data-w-accordion *-Указатель компонента
data-w-accordion-id *-Идентификатор компонента

Базовый HTML управляемого элемента (дочерний компонент)

html

<div 
  data-w-accordion-id="COMPONENT_ID"
  data-w-accordion-item
  data-w-accordion-item-id="COMPONENT_ITEM_ID"
  [data-w-accordion-item-active]
>
  Содержимое управляемого элемента (дочерний компонент)
</div>
АтрибутЗначенияОписание
data-w-accordion-id *-Идентификатор основного компонента
data-w-accordion-item *-Указатель дочернего компонента
data-w-accordion-item-id *-Идентификатор дочернего компонента
data-w-accordion-item-active-Указатель активности дочернего компонента

Базовый HTML управляющего элемента

html

<button 
  data-w-accordion-control
  [data-w-accordion-control-active]
  data-w-accordion-id="COMPONENT_ID"
  data-w-accordion-action="ONE_OF_SUPPORTED_ACTIONS"
  data-w-accordion-action-args="ARGS_TO_PASS_TO_ACTION"
  [data-w-accordion-action-flush]
>
  Содержимое управляющего элемента
</button>
АтрибутЗначенияОписание
data-w-accordion-control *-Указатель контрола
data-w-accordion-control-active-Указатель активности контрола
data-w-accordion-id *-Идентификатор компонента
data-w-accordion-action *showЭкшен компонента
data-w-accordion-action-args *-Аргументы передаваемые в экшен
data-w-accordion-action-flush-Не использовать event.preventDefault()

JavaScript

Базовая инициализация экземпляра компонента

js

if (window.welpodron && window.welpodron.accordion) {
  const instance = new window.welpodron.accordion({
      element: document.querySelector('[data-w-accordion][data-w-accordion-id="COMPONENT_ID"]');
  })
}

Доступные методы экземпляра компонента welpodron.accordion

async

show(options)

Переключение компонента в видимое состояние

АргументТипОписание
options *{ args?: unknown; event?: Event }Объект с опциями вызова метода

Карусель