Сворачиваемый контент

Подключение

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

Используя Bitrix

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

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

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

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

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

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

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

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

HTML

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

<div 
  data-w-collapse
  [data-w-collapse-active]  
  data-w-collapse-id="COMPONENT_ID"
>
  Содержимое управляемого элемента
</div>

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

<button 
  data-w-collapse-control
  [data-w-collapse-control-active]
  data-w-collapse-id="COMPONENT_ID"
  data-w-collapse-action="ONE_OF_SUPPORTED_ACTIONS"
  [data-w-collapse-action-args="ARGS_TO_PASS_TO_ACTION"]
  [data-w-collapse-action-flush]
>
  Содержимое управляющего элемента
</button>

JavaScript

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

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

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