Компонент Аккордеон : Accordion

Красивый адаптивный аккордеон для сайта с анимацией при развертывании. Горизонтальный аккордеон для раскрытия блоков с необходимой информацией внутри.

В созданном аккордеоне каждый элемент, при нажатии (клике) на заголовок элемента, может быть «развёрнут» или «раскрыт», что отобразит информационное содержание, связанное с этим элементом.

Основы. Подключение

Отзывчивый аккордеон состоит из родительского контейнера с атрибутом uk-accordion, заголовка и содержимого для каждого элемента аккордеона.

Класс Описание
.uk-accordion-title Заголовок элемента. Устанавливает и стилизует переключатель для каждого элемента аккордеона. Используйте элементы <a>.
.uk-accordion-content Определяет контентную часть для каждого элемента аккордеона.
Часть контента, которая раскрывается при нажатии на заголовок.
<ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href="#">Заголовок</a>
        <div class="uk-accordion-content">Контент</div>
    </li>
</ul>
    • Заголовок блока на который нужно нажать

      Содержимое блока 1. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

    • Какой-либо вопрос

      Какой-то ответ.Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.

    • Здесь может быть очередной вопрос

      Очередной ответ. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.

  • <ul uk-accordion> <!-- Родительский контейнер -->
        <li>
            <a class="uk-accordion-title" href="#">Заголовок блока на который нужно нажать</a>
            <div class="uk-accordion-content">
                <p>Содержимое блока 1. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href="#">Какой-либо вопрос</a>
            <div class="uk-accordion-content">
                <p>Какой-то ответ.Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href="#">Здесь может быть очередной вопрос</a>
            <div class="uk-accordion-content">
                <p>Очередной ответ. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.</p>
            </div>
        </li>
    </ul>
Универсальный аккордеон может пригодиться:
  • при создании страницы часто задаваемых вопросов (FAQ),
    отображая информацию с эффектом аккордеона;
  • на странице где имеется блок вопрос-ответ,
    когда необходимо, чтобы контент появляется при нажатии на ссылку-заголовок;
  • когда необходимо отображение/скрытие информации в блоке;...

Делаем одну вкладку открытой по умолчанию

В UIkit 3, по умолчанию все элементы аккордеона свернуты. Чтобы предотвратить такое поведение и всегда отображать один открытый элемент (при выборе другого, открытый раздел с контентом сворачивается), добавьте в атрибут параметр collapsible: false.

<ul uk-accordion="collapsible: false">...</ul>

В результате делаем так, что одна вкладка сразу будет открыта.

    • Открытая вкладка аккордеона по умолчанию

      Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

    • Название закрытой вкладки

      Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент UIkit 3.

    • Здесь ещё одно название вкладки

      Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.

  • <ul uk-accordion="collapsible: false">
        <li>
            <a class="uk-accordion-title" href="#">Открытая вкладка аккордеона по умолчанию</a>
            <div class="uk-accordion-content">
            <p>Далеко-далеко за словесными горами в <b>стране гласных и согласных</b> живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href="#">Название закрытой вкладки</a>
            <div class="uk-accordion-content">
                <p>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент <a href="@page/83">UIkit 3</a>.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href="#">Здесь ещё одно название вкладки</a>
            <div class="uk-accordion-content">
                <p>Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.</p>
            </div>
        </li>
    </ul>

Несколько открытых позиций без сворачивания

Чтобы одновременно раскрыть все позиции горизонтального аккордеона для раскрытия блоков с информацией или одновременно отображать несколько разделов контента без свертывания, когда открываются другие, добавьте параметр multiple: true в атрибут uk-accordion.

Делаем несколько открытых позиций при нажатии на заголовок:

<ul uk-accordion="multiple: true">...</ul>
    • Заголовок аккордеона с открытым контентом

      Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

    • При нажатии предыдущий не свернётся

      Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.

    • Название вкладки аккордеона

      Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.

  • <ul uk-accordion="multiple: true">
        <li class="uk-open">
            <a class="uk-accordion-title" href="#">Заголовок аккордеона с открытым контентом</a>
            <div class="uk-accordion-content">
                <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href="#">При нажатии предыдущий не свернётся</a>
            <div class="uk-accordion-content">
                <p>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href="#">Название вкладки аккордеона</a>
            <div class="uk-accordion-content">
                <p>Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.</p>
            </div>
        </li>
    </ul>

Установить произвольный элемент открытый по умолчанию

Не обязательно первый элемент адаптивного аккордеона должен быть открыт по умолчанию. Чтобы указать аккордеону, какой именно элемент должен быть открыт по умолчанию, добавьте этому элементу класс .uk-open.

<ul uk-accordion>
    <li></li>
    <li class="uk-open"></li> <!-- Этот будет открыт по умолчанию -->
    <li></li>
</ul>
Вы также можете использовать этот вариант, чтобы открыть несколько элементов одновременно. Просто убедитесь, что к атрибуту uk-accordion добавлена опция multiple: true.

Существует ещё альтернативный вариант, где совсем не обязательно добавлять к элементу списка класс .uk-open. Вы можете указать на необходимый элемент, который должен быть открыт первым, добавив к атрибуту uk-accordion параметр с номером active: <index>.

Например, чтобы показать третий элемент, необходимо установить active: 2 (индекс начинается с нуля).

Обратите внимание, что данный способ перезапишет класс uk-open.

    • Какое-то название для этой вкладки

      Третий элемент открыт по умолчанию. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

    • Обычное название для контента

      Третий элемент открыт по умолчанию. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.

    • Открытая вкладка по хитрому способу

      Открытый текст с содержанием. Крутой фреймворк. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum.

  • <ul uk-accordion="active: 2"> <!-- Альтернатива! Третий будет открыт по умолчанию -->
        <li>
            <a class="uk-accordion-title" href="#">Какое-то название для этой вкладки</a>
            <div class="uk-accordion-content">
                <p>Третий элемент открыт по умолчанию. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
            </div>
        </li>
        <li class="uk-open"> <!-- Альтернатива! Этот игнорируется -->
            <a class="uk-accordion-title" href="#">Обычное название для контента</a>
            <div class="uk-accordion-content">
                <p>Третий элемент открыт по умолчанию. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href="#">Открытая вкладка по хитрому способу</a>
            <div class="uk-accordion-content">
                <p>Открытый текст с содержанием. Крутой фреймворк. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum.</p>
            </div>
        </li>
    </ul>

Параметры компонента

Любой из этих параметров может быть применен к атрибуту компонента Аккордеон. Разделяйте несколько вариантов точкой с запятой. Узнать больше

Опция Тип По умолчанию Описание
active Number false Index элемента, который нужно открыть выборочно.
animation Boolean true Раскрывать с анимацией или без.
Пример: Открытие аккордеона без задержки.
collapsible Boolean true Предотвратить закрытие всех элементов.
Пример: Запрещённое закрытие всех вкладок.
content String > .uk-accordion-content Селектор, который содержит элементы контента аккордеона.
Пример: Пользовательский класс.
duration Number 200 Продолжительность анимации в миллисекундах. Длительность открытия содержимого.
multiple Boolean false Несколько открытых позиций без сворачивания.
targets String > * CSS селектор элемента (ов) для переключения.
toggle String > .uk-accordion-title Селектор переключателя, который переключает элементы аккордеона.
transition String ease The transition to use when revealing items.
Use keyword for easing functions.

Пример: Аккордеон без анимации

Моментальное открытие отзывчивого аккордеона без паузы. Разница отлично видна, если обратить внимание на соседний пример Аккордеон с длительным открытием.

    • Кликабельная вкладка без анимации

      Разница отлично чувствуется, если смотреть на соседний пример. Описание. Разница отлично видна, если сравнивать с соседним примером. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

  • <ul uk-accordion="animation: false"><!-- Без анимации -->
        <li>
            <a class="uk-accordion-title" href="#">Кликабельная вкладка без анимации</a>
            <div class="uk-accordion-content">
                <p>Разница отлично чувствуется, если смотреть на соседний пример. Описание. Разница отлично видна, если сравнивать с соседним примером. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
            </div>
        </li>
    </ul>

Пример: Аккордеон с увеличенной продолжительностью открытия

Пример с увеличенной продолжительностью движения, с длительным открытием содержимого при нажатии на заголовок. Значение продолжительности установлено: 900 миллисекунд. Разница хорошо заметна, если обратить внимание на соседний пример Аккордеон без анимации.

    • При нажатии длительное открытие содержимого

      Описание внутри. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

  • <ul uk-accordion="duration: 900"><!-- Аккордеон и Продолжительность анимации -->
        <li>
            <a class="uk-accordion-title" href="#">При нажатии длительное открытие содержимого</a>
            <div class="uk-accordion-content">
                <p>Описание внутри. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
            </div>
        </li>
    </ul>

Пример: По умолчанию все вкладки не могут быть закрыты

По умолчанию вкладки аккордеона с содержимым можно закрыть все без исключения. В данном примере одна вкладка будет открыта всегда в любом случае.

    • Запрещено закрыть

      Содержание открыто. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

    • Запрещённое закрытие всех вкладок

      Содержание открыто. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.

  • <ul uk-accordion="collapsible: false"><!-- Запрещено закрыть все вкладки. -->
        <li>
            <a class="uk-accordion-title" href="#">Запрещено закрыть</a>
            <div class="uk-accordion-content">
                <p>Содержание открыто. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href="#">Запрещённое закрытие всех вкладок</a>
            <div class="uk-accordion-content">
                <p>Содержание открыто. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
            </div>
        </li>
    </ul>

Пример: Пользовательский класс

В данном примере установлен пользовательский класс .uk-accordion-box вместо класса .uk-accordion-content по умолчанию.

  • <ul uk-accordion="content: > .uk-accordion-box"><!-- .uk-accordion-box -->
        <li>
            <a class="uk-accordion-title" href="#">Установленный обычный заголовок</a>
            <div class="uk-accordion-box">
            <p>Пользовательский класс <code>.uk-accordion-box</code>.<br> Убран класс <del>'Uikit3'</del> аккордеона контентной части.</p>
            </div>
        </li>
    </ul>

JavaScript

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

Инициализация

UIkit.accordion(element, options);

События

Следующие события будут инициированы для элементов компонента:

Название Описание
beforeshow Срабатывает до показа элемента. Может предотвратить показ, вернув false.
show Срабатывает после показа элемента.
shown Запускается после показа и завершения анимации.
beforehide Срабатывает до того, как предмет скрыт. Может предотвратить скрытие, вернув false.
hide Запускается после запуска анимации скрытия элемента.
hidden Срабатывает после того, как предмет скрыт.

Методы

Для компонента доступны следующие методы:

Toggle

UIkit.accordion(element).toggle(index, animate);

Переключение панели с содержимым.

Название Тип по умолчанию Описание
index String, Integer, Node 0 Аккордеонная панель для переключения.
Индекс начинается с 0.
animate Boolean true Запретить открытие с анимацией, передав false.
Документация
Компоненты