Аккордеоны — один из наиболее часто используемых компонентов пользовательского интерфейса для любого веб-сайта. Например, раздел часто задаваемых вопросов на веб-сайте, где отображается только вопрос, а при нажатии на него просто открывается ответ. Как правило, мы справляемся с этим, создавая 2 divs и добавляя некоторый javascript для обработки открытия и закрытия аккордеона. Но недавно я наткнулся на эту скрытую жемчужину в HTML, которая устраняет необходимость всего этого — <details>
Мы можем просто создать простой FAQ или краткий раздел с HTML-тегом <details> без использования Javascript!!! 🤯🤯🤯. И самое приятное... поддерживается всеми современными браузерами (очевидно кроме IE :( ) - браузерная совместимость.
Использование тега <details>
Здесь два элемента: <details> и <summary>. <details> — это оболочка для всего контента, который вы хотите показать или скрыть, и содержит — ну, сводку и заголовок раздела. <summary> является необязательным, если вы его не добавите, браузер будет использовать некоторый текст по умолчанию. Например, в Firefox и Chrome это Details. Ниже приведен пример HTML-разметки:
<details> <summary>Details</summary> <p>Something small enough to escape casual notice.</p> </details>
И это будет выглядеть так:
Эта разметка может быть разработана с помощью CSS, как и любой другой элемент HTML. Теперь для создания красивых аккордеонов вам нужны только HTML и CSS (и желание отказаться от IE).
Демо: https://itsopensource.com/demos/details/
Ваше здоровье.
Первоначально опубликовано на https://itsopensource.com.
