Аккордеон : Accordion

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

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

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

Пример

Заголовок

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником.

Ещё заголовок

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником.

Новый заголовок

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником.

Разметка

...

...

...

...

...

...

Несколько одновременно открытых позиций

Чтобы одновременно отображать несколько разделов контента без свертывания *закрытия, когда открываются другие, добавьте опцию {collapse: false} в data-* атрибут.

Пример

Заголовок

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником.

Ещё заголовок

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником.

Новый заголовок

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником.

Разметка

...

...
...

JavaScript options

Option Possible value Default Описание
showfirst boolean true Show first item on init
collapse boolean true Разрешить несколько открытых позиций
animate boolean true Анимировать toggle
easing string swing Анимационная функция
duration integer 300 Продолжительность анимации
toggle string .uk-accordion-title Css селектор для toggles
containers string .uk-accordion-content Css селектор для контейнеров с контентом
clsactive string uk-active Класс, добавляемый, когда элемент активен

Init element manually

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

Events

Name Parameter Description
toggle.uk.accordion event, active, toggle, content On item toggle