Спойлер и меню аккордеон на html и css (без использования скриптов)

Спойлер и меню аккордеон на html и css (без использования скриптов)

Nikel, 31.03.2019

Очень давно назрела проблема использования раздвижных меню и спойлеров, ведь чтобы обеспечить их работу нужно подключать скрипт. Это долго и неудобно, если речь идет о несложном меню без наворотов и простом скрытии-появлении текста на странице. К счастью, элемент  <details>, появившийся не так давно, призван решить эту задачу.

Принцип работы аккордеонов и спойлеров

Что же такое спойлер и что он из себя представляет? Это просто текст, который скрыт и остался только заголовок. Нажав на заголовок можно его открыть, второй раз нажав — скрыть обратно. Вот пример спойлера, созданного плагином WordPress.

Прежде чем мы перейдем к описанию нового элемента, давайте вспомним по какому принципу работают скриптовые меню-аккордеоны и спойлеры.
Обычно срабатывание скрипта возникает в ответ на событие — клик по пункту меню или спойлеру. В результате jQuery добавляет класс, например, active, выбранному пункту, скрытые подпункты открываются, становятся видимыми (display:none меняется на display:block). Как правило, видимость элементов меняется благодаря готовым функциям jQuery(если мы используем именно его) таким как slideToggle()(поочередно скрывающая и показывающая элемент) и тому подобные.

При нажатии на пункт меню открывается список ссылок

Пункт меню неактивный до клика по нему. Список ссылок скрыт

При нажатии на пункт меню скрипт добавляет класс active и стили display:block(выделено оранжевым)

Становится понятно, в чем состоит сложность использования чистого css для решения нашей задачи — мы можем задавать любые стили при наведении мышки на элемент или когда он в фокусе (используя такие псевдоклассы как :hover или :focus), но невозможно стилизовать элементы при клике мышкой, это всегда оставалось прерогативой javaScript.

Создание спойлера и меню с помощью элемента <details>

Элемент <details> предназначен для хранения текста, который пользователь может развернуть или опять свернуть. Само слово details означает подробности.

Этот  элемент имеет один атрибут — open, используемый для указания статуса содержимого <details>: будет ли оно отображаться(до нажатия пользователем) или останется скрыто. По умолчанию принято, что текст будет скрыт.

С open

По умолчанию

 

 

 

 

 

Внутри <details> обязательно присутствует тег <summary>, который  представляет собой заголовок элемента, он всегда стоит самым первым, перед другими тегами. При щелчке по <summary> текст раскрывается или опять скрывается. Внутри заголовка текст может быть указан любой, например «Подробнее».

Синтаксис

Spoiler

Поскольку этот элемент проще, сначала его попробуем  сделать с использованием <details>.Смотрите код ниже:

И, конечно же, рабочий пример

Спойлер

Россияне нашли в чипах Intel аппаратную закладку, через которую можно воровать данные из ПК

Все стили в этом спойлере заданы по умолчанию. Мы можем их подредактировать под свои нужды и заодно избавиться от надоедливой голубой рамочки(для этого надо добавить outline:none к стилям summary).

Подробнее…

Россияне нашли в чипах Intel аппаратную закладку, через которую можно воровать данные из ПК

В приведенном примере мы задаем отступы, границы, цвета для <details> и для заголовка <summary> и для текста внутри, который находится в абзаце p.

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

Теперь разберем, как создать раздвижное меню. Создадим такую структуру html: родительский список ul, внутри элементов li этого списка находятся теги details, а внутри каждого из них в свою очередь — еще один, дочерний список ul. Итоговый код будет выглядеть так:

Наше меню нуждается в стилизации, применим к нему CSS-стили, чтобы оно было похоже на аккордеон.

Вот такой получился результат.

Браузерная поддержка

Тег <details> поддерживает браузер Firefox с версии 49, браузеры на базе Chromium(Google Chrome, Яндекс, Опера), но к сожалению полностью отсутствует поддержка Internet Explorer и Edge. Единственный вариант решения этой проблемы — использовать javaScript. Для того, чтобы отделить неподдерживающие элемент браузеры можно использовать Modernizr. Если вы не знаете, что это можете прочитать в этой статье. Нужно найти и  в поиске details и скачать соответствующую сборку Modernizr, которая будет проверять поддержку этого элемента. Тогда для неподдерживающих браузеров можно подключить скрипт, который заставит меню работать.