Html аккордеон что это

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
3. Будет доступно управление элементами с клавиатуры и других устройств.
4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
6. Работает при выключенном javascript.

 
Покажи-скрой меня
 
Скандинавская мифология — мифология древних скандинавов
 
 
Покажи-скрой меня 2
 
Основным источником сведений о ней являются тексты поэтической
 
 
Покажи-скрой меня 3
 
Скандинавская мифология — мифология древних скандинавов
 
 

С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.

К сожалению, у дефолтного маркера есть два недостатка:

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; >summary:before < content: "+"; margin-right: .3em; >details[open] > summary:before < content: "–"; >summary ~ * < padding:0 1em 0 1em; >summary:focus < outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); >details

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Текстовый маркер справа + простейшая анимация текста и маркера:

summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; >summary:after < content: "+"; margin-left: .3em; display: inline-block; transition: transform .5s; >details[open] > summary:after < transform: scale(1,-1); >summary ~ * < padding:0 1em 0 1em; >summary:focus < outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > details

В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

Анимация маркера при помощи transform: scale(1,-1);

Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;

Svg маркер + анимация поворота:

summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:inline-block; padding: .3em .6em .3em 1.5em; font-size:1.4em; cursor: pointer; position: relative; >summary:before < left: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; >details[open] > summary:before < transform: rotateZ(90deg); >summary ~ * < padding:0 1em 0 1em; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > summary:focus < outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); >details

Summary:before пришлось серьезно переделать:

1. Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
2. Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
3. Картинку вешаем при помощи background.

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

Для summary поставить padding-right: 1.5em;

summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:inline-block; padding: .3em 1.5em .3em .6em; font-size:1.4em; cursor: pointer; position: relative; >summary:before < right: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; >details[open] > summary:before < transform: rotateZ(90deg); >summary ~ * < padding:0 1em 0 1em; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > summary:focus < outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); >details

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

body details < display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; >summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:block; padding: .3em .3em .3em 1.4em; font-size:1.4em; cursor: pointer; position: relative; border-bottom: 1px solid #e2e8f0; >summary:before < top: .4em; left: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; >details[open] > summary:before < transform: rotateZ(90deg); >summary ~ * < padding: 0 2em 10px 2em; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > summary:focus

Svg маркер справа + эффект зеркального поворота стрелки:

body details < display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; >summary::-webkit-details-marker summary::-moz-list-bullet summary::marker summary < display:block; padding: .3em 1em .3em .9em; border-bottom: 1px solid #e2e8f0; font-size:1.4em; cursor: pointer; position: relative; >summary:before < top: .4em; right: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; >details[open] > summary:before < transform: scale(1,-1); >summary ~ * < padding: 0 1em 10px 1.4em; >details[open] summary ~ * < animation: sweep .5s ease-in-out; >@keyframes sweep < 0% 100% > summary:focus

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.

Если вам нужно, чтоб при открытии одного спойлера, закрывались остальные, то придется применить javascript, ниже привожу пример простого JS кода, который решит эту проблему.

var details = document.querySelectorAll("details"); for(i=0;i function accordion(event) < if (!event.target.open) return; var details = event.target.parentNode.children; for(i=0;idetails[i].removeAttribute("open"); > > 

С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

Источник

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

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

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

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

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

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

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

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

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

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

.tab-title::after < content: '+'; >:checked + .tab-title::after

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

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

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

Решение с использованием псевдокласса :checked получается достаточно гибким и легко настраиваемым под свои нужды. Так, можно заранее сделать отдельные пункты открытими, добавив к атрибут checked . Если требуется поменять поведение аккордеона, чтобы открытым был только один пункт, то нужно поменять значение атрибута type на radio . Сам CSS остаётся исходным и какие-либо правки вносить в него не понадобится.

См. также

• content
• quotes
• relative и absolute
• Анимация ссылок при наведении
• Атрибуты ссылок
• Вкладки на CSS
• Выпадающее меню
• Добавление тени
• Использование :checked
• Не только текст
• Очистка float
• Подробнее о позиционировании
• Подсказка в поле формы
• Пользовательские формы
• Псевдокласс :checked
• Псевдоэлемент ::after
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Спойлер
• Стилизация переключателей
• Стилизация флажков
• Формы в Bootstrap 4
• Формы в HTML
• Элемент label

Источник

W3.CSS Accordions

Click on the «Open Section» buttons below to see how accordions work:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion

An accordion is used to show (and hide) HTML content.

Use the w3-hide class to hide the accordion content.

Use any kind of button to open and close the content:

Example

Both the element that is used to open the accordion and the accordion’s content can be any HTML element.

Accordion vs. Dropdown

This table shows the difference between an accordion and a dropdown:

Accordion	Dropdown
Content pushes the page content down	Content lays over existing the page content
Content is often 100% wide	Content is 160px wide (default)
Often used to open multiple sections	Often used to open one section

Accordions

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Источник

W3.CSS Аккордеоны

Нажмите на кнопку «Открыть раздел» ниже, чтобы увидеть, как работают аккордеоны:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Аккордеон с изображениями:

Аккордеон

Аккордеон используется для отображения (и скрытия) содержимого HTML.

Используйте класс w3-hide чтобы скрыть содержание аккордеона.

Используйте любую кнопку, чтобы открыть и закрыть содержимое:

Пример

И элемент, который используется для открытия аккордеона, и контент аккордеона могут быть любым элементом HTML.

Аккордеон vs. Dropdown

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

Аккордеон	Dropdown
Контент выталкивает содержимое страницы вниз	Контент лежит поверх существующего контента страницы
Содержание часто составляет 100%	Контент шириной 160px (по умолчанию)
Часто используется для открытия нескольких разделов	Часто используется для открытия одного раздела

Аккордеоны

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Выпадающие элементы

Аккордеонные Кнопки

Вы можете использовать любой элемент HTML, чтобы открыть содержание аккордеона. Мы предпочитаем кнопку с классом w3-block, чтобы охватить всю ширину страницы (ширина 100%).

Помните, что кнопки в W3.CSS центрированы по умолчанию. Используйте класс w3-left-align, если хотите, чтобы они были выровнены по левому краю. Тем не менее, вы не должны обязательно следовать нашему подходу — аккордеон будет хорошо выглядеть в любом случае:

Контент центрирован также!

Пример

Активные Аккордеонные Кнопки

Используйте JavaScript, чтобы выделить открытые (кликнутые) аккордеоны:

Пример

// Добавьте класс w3-red ко всем открытым аккордеонам
var x = document.getElementById(id);
if (x.className.indexOf(«w3-show») == -1) x.className += » w3-show»;
x.previousElementSibling.className += » w3-red»;
> else <
x.className = x.className.replace(«w3-show», «»);
x.previousElementSibling.className =
x.previousElementSibling.className.replace(«w3-red», «»);
>

Ширина Аккордеона

По умолчанию ширина блока составляет 100%. Чтобы переопределить это, измените CSS свойство width контейнера accordion:

Источник