Компоненты

Аккордеон

Аккордеоны полностью переписаны, сейчас используется делегирование как следствие отсутствуют проблемы с динамическим добавлением элементов + в классе дописаны методы которые помогут если трудности всё же возникнут, исключены все проблемы со вложенностью и анимациями.

В файле init-accordion.js создаётся экземпляр класса Accordions который записывается в переменную accordion, им вы можете пользоваться по проекту при необходимости, так же он записывается в window.accordion.

Используйте в разработке экспортируемую переменную accordions, window сделан для бэкэнда

Аккордеоны состоят из следующих файлов: accordions.js, init-accordion.js и data-accordion.scss все файлы обязательны к переносу в проект! Файл accordion.scss добавлен только для стилизации, в нём вы можете менять всё что угодно

accordions.updateAccordionsHeight(element = null)	принимает элемент и апдейтит его высоту, если элемент не передан то произойдёт апдейт высоты всех открытых элементов
accordions.fullUpdate(parent = null, transition = false)	принимает родителя и булево значение, происходит полный апдейт, если во вложенных аккордеонах есть открытые элементы (is-active), то произойдет открытие всех вложенных элементов вверх до родителя. Если родитель не передан то апдейтятся все аккордеоны, если не передан второй параметр то апдейт присходит мгновенно без анимаций, что бы была анимация апдейта нужно вторым параметрам передать true. Этот метод запускается при инициализации, так что будьте внимательны с теми местами где вы расставляете класс is-active
accordions.openAccordion(element, transition = true)	принимает элемент и булево значение, происходит открытие элемента. Передача элемента обязательна, по умолчанию анимация есть, что бы её убрать вторым параметром передаём false
accordions.closeAccordion(element, transition = true)	принимает элемент и булево значение, происходит закрытие элемента. Передача элемента обязательна, по умолчанию анимация есть, что бы её убрать вторым параметром передаём false
accordions.closeAllAccordion(parent)	принимает родителя и закрывает все элементы в нём

Обязательные data атрибуты

data-accordion="parent"	Устанавливается на родителе
data-accordion="element"	Устанавливается на элементе аккордеона
data-accordion="button"	Устанавливается на кнопке открытия
data-accordion="content"	Устанавливается на обёртке контента

Не обязательные data атрибуты

data-destroy="(max-width: 767px)" или data-destroy="(min-width: 768px)"	Устанавливается на родителе, в нём записывается медиа, при котором работает аккордеон
data-single	Устанавливается на родителе, отвечает за показ только одного открытого аккордеона в группе родителя

Не обязательные классы

is-active	Это класс который можно повесить на элемент аккордеона для его открытия при загрузке.

Пример аккордеона с вложенностью

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, eaque consequatur perspiciatis impedit ab aperiam neque corrupti nisi deleniti optio enim provident molestiae, quidem sint laboriosam reiciendis accusantium iusto distinctio!