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, ее можно проверить в инструменте Гугла.