Что такое элемент аккордеон

Аккордеон (элемент интерфейса)

Из Википедии — свободной энциклопедии

Графический элемент аккордеон представляет собой вертикально сложенный список элементов, таких как текстовые метки или эскизы. Каждый элемент может быть «развёрнут» или «раскрыт», чтобы показать содержание, связанное с этим элементом.

Термин связан с одноимённым музыкальным инструментом, в котором секции мехов разворачиваются при растягивании.

Общий пример аккордеона — это операция «Показать/Скрыть» в отдельном регионе, который может быть раскрыт, чтобы показать содержимое нескольких разделов в списке.

Аккордеон похож по смыслу на интерфейс с вкладками, на список пунктов, где ровно один элемент развернут в панели (то есть элементы списка ярлыков ссылаются на отдельные панели).

Источник

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

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

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

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

• на странице, где имеется блок «вопрос-ответ» и необходимо, чтобы контент появлялся при нажатии на заголовок-ссылку;
• когда необходимо отображение/скрытие информации в блоке;
• при создании страницы часто задаваемых вопросов (FAQ), отображая информацию в виде переключаемых вкладок с эффектом аккордеона, на которых вопросы и ответы к ним размещены в виде разворачивающихся «аккордеонов», где вопрос — это заголовок «аккордеона», который всегда остается видимым, а ответ на интересующий вопрос находится в блоке, который плавно разворачивается при клике на заголовок.

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

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

Класс	Описание
.uk-accordion-title	Заголовок элемента. Устанавливает и стилизует переключатель для каждого элемента аккордеона. Используйте элементы .
.uk-accordion-content	Определяет контентную часть для каждого элемента аккордеона. Часть контента, которая раскрывается при нажатии на заголовок.

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

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

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

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

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

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

Ниже расположен простой пример аккордеона с открытой вкладой по умолчанию.

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

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

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

Множественное раскрытие

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

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

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

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

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

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

Произвольный элемент

Раскрытие произвольного элемента

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

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

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

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

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

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

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

Параметры для атрибута

При использовании компонента 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	Offset added to scroll top.

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

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

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

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

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

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

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

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

Пользовательский класс .uk-accordion-box .
Убран класс .uk-accordion-content аккордеона контентной части.

Пользовательский класс .uk-accordion-box .
Убран класс .uk-accordion-content аккордеона контентной части.

JavaScript

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

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

События

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

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

Методы

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

Источник

Аккордеон меню

Аккордеон представляет собой список с раскрывающимся содержимым (рис. 1). Удобен для создания больших меню из-за компактности, а также для блоков вопросов и ответов. Название произошло от музыкального инструмента, который напоминает своим видом.

Рис. 1. Вид аккордеона

Есть два типа аккордеон-меню.

1. При раскрытии любого пункта списка открытое содержимое закрывается; по своему действию это похоже на вкладки.
2. Можно раскрывать любой пункт списка, остальные пункты при этом не закрываются.

Поскольку аккордеон своей работой напоминает вкладки, то мы можем использовать тот же самый код HTML, что и при создании вкладок (пример 1). Для первого типа аккордеона вставляем , который позволяет выбрать лишь один пункт, а для второго типа — с его помощью можно раскрывать и закрывать произвольное число пунктов.

Пример 1. Код отдельного пункта аккордеона

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

Алгоритм создания аккордеона повторяет шаги при создании вкладок. Сперва мы прячем и содержимое через свойство display со значением none .

Затем с помощью псевдокласса :checked показываем содержимое, задавая свойству display значение block .

Для разнообразия справа от заголовка добавим символ плюса, он будет показывать пользователю что пункт раскрывается; при открытии пункта символ плюса меняем на минус. Оба действия делаются через псевдоэлемент ::after и свойство content, в значении которого пишем текст. При желании плюс и минус можно поменять на что-то другое, к примеру, на стрелки.

Чтобы пользователь понимал, что на пункты списка можно щёлкать, изменим вид курсора на «руку» при наведении на заголовок.

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

Пример 2. Создание аккордеона

Под HTML5 обычно подразумевают два разных понятия:

• Это язык разметки документа, пришедший на смену HTML4 и XHTML.
• Это набор веб-технологий, позволяющий делать на сайте всякие интересные штуки.

Источник

Как создать вертикальный аккордеон для сайта

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).

Процесс создания аккордеона

Процесс разработки вертикального аккордеона будет состоять из:

• создания HTML разметки;
• описания его внешнего вида с помощью CSS;
• написания логики на JavaScript.

Дизайн аккордеона (скриншот):

HTML код аккордеона и его описание

Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).

Состояние элемента (accordion-item) в аккордеоне определяется с помощью класса show . Если данный класс присутствует, то содержимое элемента (accordion-item-content) показывается. В противном случае оно скрыто.

Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).

CSS код аккордеона

Данный код выполняет стилизацию элементов аккордеона, добавляет к ним необходимые внутренние отступы, цвет текста, цвет фона и др. Но, кроме этого, он ещё определяет видимость элементов аккордеона с классом accordion-item-content , т.е. содержимого .

По умолчанию элементы, имеющие класс accordion-item-content не отображаются (CSS свойство display равно значению none ). Включение отображения определённого элемента (accordion-item-content) осуществляется посредством класса show , который необходимо добавить к его родительскому элементу (accordion-item).

JavaScript код аккордеона

Сценарий (логика) аккордеона:

Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).

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

Аккордеон, заголовки которого отделены друг от друга

Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:

CSS, добавляющий к элементам аккордеона отступы снизу ( margin-bottom ):

Аккордеон с анимацией появления

Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:

Стили аккордеона, включающие в себя анимацию (для отображения содержимого):

Вертикальное меню аккордеон

Пример настройки аккордеона в качестве вертикального меню.

Дополнительно в JavaScript сценарий добавим небольшой фрагмент кода, который будет показывать сколько подпунктов имеет каждый пункт в этом меню.

CSS и JavaScript:

Многоуровневое вертикальное меню аккордеон

Пример в котором рассмотрим как создать многоуровневое вертикальное меню аккордеон.

HTML, CSS и JavaScript код многоуровневого меню:

Источник