<details> / <summary>
HTML-элементы, дающие встроенный раскрывающийся блок (аккордеон) без JavaScript. <details> прячет содержимое за кликабельным заголовком <summary>, который раскрывается и сворачивается. Доступен и удобен с клавиатуры из коробки.
Механика: содержимое кладут в <details>, первым идёт <summary>; браузер показывает только его, пока не щёлкнут, а затем раскрывает содержимое. Атрибут open задаёт и отражает состояние. Применение: разделы FAQ, «читать дальше», сворачиваемые панели, спойлеры — всё, что раньше требовало JS.
Недавнее дополнение: атрибут name заставляет несколько <details> с одинаковым именем вести себя как эксклюзивный аккордеон (открыт только один) — тоже без JS. Выигрыш: доступность «бесплатно» (работает со скринридерами и клавиатурой), ноль кода, работает и при отключённом JS. Стилизуется через ::details-content и поддаётся анимации. Классический пример HTML-возможности, заменившей целую категорию JS-виджетов.