Компонент Аккордеон
Красивый адаптивный аккордеон для сайта с анимацией при развертывании. Горизонтальный выпадающий список аккордеон для раскрытия блоков с необходимой информацией внутри.
В созданном аккордеоне, при нажатии (клике) на заголовок элемента, каждый элемент может быть «развёрнут» или «раскрыт», что в свою очередь отобразит информационное содержание связанное с этим элементом.
Универсальный аккордеон может пригодиться:
- на странице, где имеется блок «вопрос-ответ» и необходимо, чтобы контент появлялся при нажатии на заголовок-ссылку;
- когда необходимо отображение/скрытие информации в блоке;
- при создании страницы часто задаваемых вопросов (FAQ), отображая информацию в виде переключаемых вкладок с эффектом аккордеона, на которых вопросы и ответы к ним размещены в виде разворачивающихся «аккордеонов», где вопрос — это заголовок «аккордеона», который всегда остается видимым, а ответ на интересующий вопрос находится в блоке, который плавно разворачивается при клике на заголовок.
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>
Открытая вкладка
Делаем одну вкладку открытой по умолчанию
В UIkit 3 по умолчанию все элементы аккордеона свернуты.
Чтобы предотвратить такое поведение и всегда отображать один открытый элемент (при выборе другого,
открытый раздел с контентом плавно сворачивается), добавьте в атрибут параметр collapsible: false
.
В результате cделаем так, что одна вкладка сразу будет открытой по умолчанию.
<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>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href>Название закрытой вкладки</a>
<div class="uk-accordion-content">
<p>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент <b>UIkit 3</b>.</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
.
-
Какое-то название для этой вкладки
Третий элемент открыт по умолчанию. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
-
Обычное название для контента
Третий элемент открыт по умолчанию. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в компонент.
-
Открытая вкладка по хитрому способу
Открытый текст с содержанием. Крутой фреймворк UIkit. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени 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>Открытый текст с содержанием. Крутой фреймворк UIkit. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum.</p>
</div>
</li>
</ul>
Параметры для атрибута
При использовании компонента Accordion к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опции компонента
Опция | Тип | По умолчанию | Описание |
---|---|---|---|
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 |
Переходное состояние. Функции плавности. easing functions. |
offset |
Number | 0 |
Смещение, добавляемое к верхней части. |
Моментальное открытие отзывчивого аккордеона без паузы. Разница отлично видна, если обратить внимание на соседний пример Аккордеон с длительным открытием.
-
Кликабельная вкладка без анимации
Описание: Разница отлично чувствуется, если смотреть на соседний пример. Разница отлично видна, если сравнивать с соседним примером. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
<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
по умолчанию.
-
Установленный обычный заголовок
Пользовательский класс
.uk-accordion-box
.
Убран класс.uk-accordion-contentаккордеона контентной части. -
Установлен пользовательский класс
Пользовательский класс
.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>.uk-accordion-content</del> аккордеона контентной части.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Установлен пользовательский класс</a>
<div class="uk-accordion-box">
<p>Пользовательский класс <code>.uk-accordion-box</code>.<br> Убран класс <del>.uk-accordion-content</del> аккордеона контентной части.</p>
</div>
</li>
</ul>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.accordion(element, options);
События
Следующие события будут инициированы для элементов компонента «Accordion»:
Имя события | Описание |
---|---|
beforeshow |
Срабатывает до показа элемента. Может предотвратить показ, вызвав preventDefault() .
|
show |
Срабатывает после показа элемента. |
shown |
Запускается после завершения анимации данного элемента. |
beforehide |
Срабатывает до того, как элемент скрыт. Может предотвратить скрытие, вызвав preventDefault() .
|
hide |
Запускается после запуска анимации скрытия элемента. |
hidden |
Срабатывает после того, как элемент скрыт. |
Методы
Для компонента «Accordion» доступны следующие методы:
Toggle
UIkit.accordion(element).toggle(index, animate);
Переключение панели с содержимым.
Название | Тип | По умолчанию | Описание |
---|---|---|---|
index |
String, Number, Node | 0 |
Аккордеонная панель для переключения. Индекс начинается с 0. |
animate |
Boolean | true |
Запретить открытие с анимацией, передав false . |
Доступность
Компонент Accordion придерживается Accordion Pattern (Sections With Show/Hide Functionality) и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
- Заголовки имеют идентификатор (ID), роль
button
, состояниеaria-expanded
и свойствоaria-controls
соответствующего содержимого. - Содержимое имеет идентификатор (ID), роль
region
и свойствоaria-labelledby
установленное на идентификатор соответствующего заголовка.
Взаимодействие с клавиатурой
Доступ к компоненту Accordion можно получить с помощью клавиатуры, используя следующие клавиши:
- Клавиши tab или shift+tab перемещаются по заголовкам аккордеона.
- Клавиши enter или space переключает содержимое выделенного заголовка.