Компоненты
Аккордеон
Аккордеоны полностью переписаны, сейчас используется делегирование как следствие отсутствуют проблемы с динамическим добавлением элементов + в классе дописаны методы которые помогут если трудности всё же возникнут, исключены все проблемы со вложенностью и анимациями.
В файле 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!
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!
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!
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!
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!
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!
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!
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!
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!
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!
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!
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!
Пример аккордеона без вложенности
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!
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!
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!
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!
Пример аккордеона с установленым data-destroy="(max-width: 767px)
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!
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!
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!
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!