HTML5 и CSS3. Аккордеон.

Фронтендерам за свою жизнь много раз приходится делать "аккордеоны", и каждый раз это какой-то челендж с велосипедами, своими или чужими. Хороший аккордеон нельзя было сделать без JavaScript.

В HTML5 появились тэги details и summary:

<details>
  <summary>Title</summary>
  <p>Some description</p>
</details>

Они позволяют построить элемент "аккордеон" на чистом семантическом HTML, без привлечения JS. Переключение видимости происходит атрибутом open. Следить за состоянием можно подписавшись на событие toggle.

На vue-faq.org используются именно details для организации вопросов-ответов.

По умолчанию данный элемент выглядит как на картинке, с треугольным маркером, однако details и summary допускают глубокую стилизацию, позволяя оформить аккордеон как понадобится - например, убрать маркер, добавить поворачивающийся крестик и анимацию при раскрытии. Соответствующий CSS - в комментариях.

#tip #html