Аккордеон

Создать список товаров, что каждый элемент Контента будет развернуть и свернуть, щелкнув по его заголовку.

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

Чтобы применить аккордеон компонента, добавить uk-accordion класс и data-uk-accordion атрибут в элемент-контейнер. Добавить uk-accordion-content для каждого класса содержание разделов внутри контейнера. Наконец, добавьте uk-accordion-title класса для любого элемента, как Заголовок, выше содержимого, чтобы создать переключатель.

Пример

Заголовок 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Заголовок 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Заголовок 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Разметки

<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

</div>

Muliple открытых позиций

Для отображения нескольких разделов содержание в то же время без него рушится, когда другой открыт, добавить {collapse: false} параметр для атрибута данных.

Пример

Заголовок 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Заголовок 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Заголовок 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


JavaScript варианты

Вариант Возможное значение По умолчанию Описание
showfirst boolean true Шоу первого элемента инициализации
collapse boolean true Разрешить несколько открытых позиций
animate boolean true Анимировать переключение
easing string swing Функция анимации
duration integer 300 Длительность анимации
toggle string .uk-accordion-title CSS селектор переключает
containers string .uk-accordion-content Селектор CSS для содержимого контейнеров
clsactive string uk-active Класса, чтобы добавить, когда элемент активен

Инициализации элементов вручную

var accordion = UIkit.accordion(element, { /* options */ });

События

Название Параметр Описание
toggle.uk.accordion event, active, toggle, content По пункту переключения