Главная CSS-верстка

FAQ на тегах details и summary с анимацией и микроразметкой

На сайтах часто встречаются блоки с ответами на часто задаваемые вопросы. Ответы при этом по умолчанию скрыты, а при клике на вопрос ответ раскрывается. Такого типа блок еще называют «аккордеоном».

Я видел разные варианты HTML-разметки «аккордеона». Чаще всего, к сожалению, используется просто тег <div> для всей структуры блока. Однако, с точки зрения семантики сюда прекрасно подходит дуэт тегов <details> и <summary>, поэтому было бы правильно использовать именно их.

Элементы <details> и <summary> по умолчанию дают нам поведение «аккордеона». Нужно лишь добавить красивостей через CSS, а, благодаря небольшому скрипту на JavaScript, раскрытие ответа можно сделать плавным. Причем сама анимация происходит опять же с помощью CSS. Через JavaScript лишь определяется высота элемента, которая передается в CSS-переменную.

Анимироваться будет свойство max-height. Поскольку в CSS нужно обязательно указывать конкретную величину для max-height раскрытого состояния (при значении auto анимация работать просто-напросто не будет), в этом нам и помогает JavaScript.

Демо

Вот что у меня получилось в результате:

See the Pen
details и summary с анимацией и микроразметкой
by Dimox (@dimox)
on CodePen.

Пояснения к коду

На что хотелось бы обратить внимание:

  • Скриптом добавляются специальные CSS-классы js-details и is-open, благодаря которым все стилизуется таким образом, чтобы в случае, если скрипт отключен, все работало, как положено (естественно, уже без анимации разворачивания).
  • Продолжительность анимации задается в CSS-переменной --animation-duration.
  • По умолчанию при раскрытии ответа соседние сворачиваются. Это поведение можно отключить, поменяв значение JS-переменной minimizeSiblings на false.
  • В HTML-код интегрирована микроразметка schema.org, ее можно проверить в инструменте Гугла.

Комментарии (1)

  1. Спасибо!

    Полностью рабочий вариант FAQPage с микроразметкой и удобной анимацией.

    ПС: текст из JS пришлось запихнуть в футера, т.к. места установки ЧаВо сделаны через снипет, а не шаблон компонента (битрикс).

Ваш комментарий