Аккордеон: details и summary

Аккордеон — список блоков, у которых виден только заголовок, а содержимое раскрывается по щелчку. Он экономит место в разделах вроде «Вопросы и ответы». В HTML для этого есть пара тегов <details> и <summary>: браузер сам открывает и закрывает блок, без JavaScript. Pico добавляет к ним стрелку и отступы.

Один раскрывающийся блок

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<details>
  <summary>Сколько стоит лендинг?</summary>
  <p>От 600 $ в зависимости от числа блоков и анимаций.</p>
</details>

В превью видна строка вопроса со стрелкой справа. Щёлкните по ней — стрелка повернётся и под вопросом появится ответ. <summary> всегда идёт первым ребёнком <details>, всё остальное — скрываемое содержимое.

Аккордеон из нескольких пунктов

Несколько <details> ставят подряд, разделяя их линией <hr>. Атрибут open раскрывает блок сразу при загрузке, а общий атрибут name связывает пункты: открытие одного закрывает остальные.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<h3>Вопросы и ответы</h3>
<details name="faq" open>
  <summary>Сколько стоит лендинг?</summary>
  <p>От 600 $ в зависимости от числа блоков.</p>
</details>
<hr>
<details name="faq">
  <summary>Сколько длится работа?</summary>
  <p>Обычно две недели от прототипа до запуска.</p>
</details>
<hr>
<details name="faq">
  <summary>Вы делаете сайты на CMS?</summary>
  <p>Да, на WordPress и статических генераторах.</p>
</details>

Первый ответ открыт сразу. Откройте второй — первый закроется сам. Атрибут name у <details> поддерживают все современные браузеры; в старом браузере пункты просто будут открываться независимо.

Заголовок в виде кнопки

Если поставить role="button" на <summary>, заголовок станет кнопкой со стрелкой. Классы вариантов из урока о кнопках тоже работают:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<details>
  <summary role="button" class="outline">Показать навыки</summary>
  <ul>
    <li>HTML и CSS</li>
    <li>Адаптивная вёрстка</li>
    <li>Доступность</li>
  </ul>
</details>

Кнопка с контуром раскрывает список навыков. Такой вид удобен, когда блок один и его нужно заметить.

Частая ошибка

Положить в <summary> заголовок <h3> или ссылку. Ссылка внутри перехватит щелчок, и блок перестанет раскрываться, а заголовок сломает выравнивание стрелки. Пишите в <summary> короткий текст, а заголовки и ссылки размещайте в раскрываемой части.