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

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

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

Универсальный аккордеон может пригодиться:

  • на странице, где имеется блок «вопрос-ответ» и необходимо, чтобы контент появлялся при нажатии на заголовок-ссылку;
  • когда необходимо отображение/скрытие информации в блоке;
  • при создании страницы часто задаваемых вопросов (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>
  • Заголовок блока на который нужно нажать

    Содержимое блока 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>

Открытая вкладка

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

В 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 по умолчанию. 

<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 переключает содержимое выделенного заголовка.