Аккордеон

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

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

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

Пример

Заголовок

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

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

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

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

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

Разметка

<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>

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

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

Пример

Заголовок

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

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

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

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

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

Разметка

<div class="uk-accordion" data-uk-accordion="{collapse: false}">

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

    ...

</div>

Параметры 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 Переключение между элементами