Разворачиваемые блоки (details, summary) [Модуль 8: Семантические элементы HTML5]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Часто на сайтах нужно спрятать часть информации под спойлер или в выпадающий список, например, в секции FAQ. Раньше для этого требовался JavaScript, но с HTML5 появились специальные семантические элементы — `details` и `summary`. Они позволяют создавать такие разворачиваемые блоки стандартными средствами HTML, что делает код чище и доступнее для вспомогательных технологий. В этих заданиях мы отработаем их использование: от создания простого спойлера и управления его состоянием до вложенных структур и взаимодействия с CSS для кастомного оформления. Вы научитесь делать интерактивные элементы без единой строчки JavaScript.

Список тем

Создание простого разворачиваемого блока

id: 37873_details-summary-1

Создайте базовый разворачиваемый блок. Заголовок 'Подробнее' должен быть виден всегда, а текст 'Здесь находится скрытая информация.' должен появляться только по клику на заголовок.

CSS

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

summary {
  font-weight: bold;
  cursor: pointer;
}

                     <input1>
  <input2>Подробнее</input2>
  <p>Здесь находится скрытая информация.</p>
</input1>

HTML

<input1>
  <input2>Подробнее</input2>
  <p>Здесь находится скрытая информация.</p>
</input1>

Используйте тег `<details>` как контейнер для всего блока. Внутри него поместите тег `<summary>` для видимого заголовка. Остальное содержимое, которое будет скрыто, размещается после `<summary>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Блок, открытый по умолчанию

id: 37873_details-summary-2

Сделайте так, чтобы разворачиваемый блок с техническими характеристиками товара был виден сразу при загрузке страницы. Пользователь должен видеть и заголовок, и содержимое без необходимости клика.

CSS

details {
  background-color: #f9f9f9;
  border: 1px solid #e1e1e1;
  padding: 15px;
  border-radius: 5px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

                     <details input1>
  <summary>Технические характеристики</summary>
  <ul>
    <li>Процессор: 8-ядерный</li>
    <li>Память: 16 ГБ</li>
    <li>Накопитель: 512 ГБ SSD</li>
  </ul>
</details>

HTML

<details input1>
  <summary>Технические характеристики</summary>
  <ul>
    <li>Процессор: 8-ядерный</li>
    <li>Память: 16 ГБ</li>
    <li>Накопитель: 512 ГБ SSD</li>
  </ul>
</details>

Чтобы `<details>` блок был открыт по умолчанию, ему необходимо добавить специальный булевый атрибут `open`. Этот атрибут не требует значения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление контента в спойлер

id: 37873_details-summary-3

В готовый `details` блок добавьте абзац с текстом. Текст 'Это дополнительная информация, которая должна быть скрыта.' должен находиться внутри спойлера, но не в его заголовке.

CSS

details {
  border-left: 3px solid #007bff;
  padding: 10px;
  background-color: #f0f8ff;
}

summary {
  cursor: pointer;
}

                     <details>
  <summary>Условия доставки</summary>
  <input1>Это дополнительная информация, которая должна быть скрыта.</input1>
</details>

HTML

<details>
  <summary>Условия доставки</summary>
  <input1>Это дополнительная информация, которая должна быть скрыта.</input1>
</details>

Любой контент, который должен быть скрыт, размещается внутри тега `<details>`, но обязательно *после* закрывающего тега `</summary>`. Для текста используйте тег абзаца `<p>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Вложенные разворачиваемые блоки

id: 37873_details-summary-4

Создайте структуру, где один разворачиваемый блок находится внутри другого. Внешний блок будет 'Часто задаваемые вопросы', а внутренний — один из вопросов с ответом.

CSS

.faq-container {
  padding: 10px;
}

.faq-container details {
  margin-left: 20px;
  margin-top: 10px;
}

summary {
  cursor: pointer;
}

                     <input1 class="faq-container">
  <input2>Часто задаваемые вопросы</input2>
  <p>Здесь собраны ответы на популярные вопросы.</p>

  <input3>
    <input4>Как отменить заказ?</input4>
    <p>Для отмены заказа свяжитесь с нашей службой поддержки.</p>
  </input3>

</input1>

HTML

<input1 class="faq-container">
  <input2>Часто задаваемые вопросы</input2>
  <p>Здесь собраны ответы на популярные вопросы.</p>

  <input3>
    <input4>Как отменить заказ?</input4>
    <p>Для отмены заказа свяжитесь с нашей службой поддержки.</p>
  </input3>

</input1>

Вы можете поместить один элемент `<details>` внутрь другого. Главное, чтобы каждый `<details>` имел свой собственный `<summary>` и соблюдалась иерархия тегов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Замена стандартной стрелки-маркера

id: 37873_details-summary-5

Создайте разворачиваемый блок. Предоставленный CSS убирает стандартную стрелку у спойлера и добавляет вместо нее знаки '+' и '-' для обозначения состояния. Примените правильную HTML-разметку, чтобы стили сработали.

CSS

details.custom-marker > summary {
  list-style: none; /* Прячем стандартный маркер */
  cursor: pointer;
}

details.custom-marker > summary::-webkit-details-marker {
  display: none; /* Прячем маркер для Chrome/Safari */
}

details.custom-marker > summary::before {
  content: '+ ';
  font-weight: bold;
}

details.custom-marker[open] > summary::before {
  content: '− ';
}

                     <details class="input1">
  <input2>Показать/Скрыть детали</input2>
  <p>Этот текст появляется и исчезает.</p>
</details>

HTML

<details class="input1">
  <input2>Показать/Скрыть детали</input2>
  <p>Этот текст появляется и исчезает.</p>
</details>

Вам нужно создать стандартную структуру с помощью `<details>` и `<summary>`. Чтобы CSS-правила применились, контейнеру `<details>` необходимо присвоить класс `custom-marker`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Спойлер с изображением

id: 37873_details-summary-6

Создайте разворачиваемый блок 'Характеристики кота'. Внутри скрытой части должна быть не только текстовая информация, но и изображение. Используйте теги `details` и `summary` для создания этой структуры.

CSS

details {
  border: 1px dashed #6c757d;
  padding: 10px;
}

summary {
  cursor: pointer;
  color: #0056b3;
}

img {
  margin-top: 10px;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

                     <input1>
  <input2>Знакомьтесь, это Барон</input2>
  <p>Порода: Британская короткошёрстная</p>
  <p>Любимое занятие: Спать на клавиатуре.</p>
  <img src="https://naytikurs.ru/img/8.png" alt="Милый кот" width="250">
</input1>

HTML

<input1>
  <input2>Знакомьтесь, это Барон</input2>
  <p>Порода: Британская короткошёрстная</p>
  <p>Любимое занятие: Спать на клавиатуре.</p>
  <img src="https://naytikurs.ru/img/8.png" alt="Милый кот" width="250">
</input1>

Оберните весь контент, включая заголовок, абзацы и изображение, в тег `<details>`. Заголовок 'Знакомьтесь, это Барон' поместите в тег `<summary>`. Все остальное (абзацы и `<img>`) должно следовать за ним внутри `<details>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Секция FAQ с несколькими вопросами

id: 37873_details-summary-7

Создайте полноценную секцию 'Вопросы и ответы' из двух пунктов. Каждый вопрос должен быть отдельным разворачиваемым блоком. Эта задача объединяет все предыдущие навыки.

CSS

.faq-item {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  font-weight: 500;
  cursor: pointer;
}

                     <h3>Вопросы и ответы</h3>

<input1 class="faq-item">
  <input2>Что входит в подписку?</input2>
  <p>В подписку входят все курсы на платформе без ограничений.</p>
</input1>

<details class="faq-item" open>
  <input3>Можно ли отменить подписку?</input3>
  <p>Да, вы можете отменить подписку в любой момент в личном кабинете.</p>
</details>

HTML

<h3>Вопросы и ответы</h3>

<input1 class="faq-item">
  <input2>Что входит в подписку?</input2>
  <p>В подписку входят все курсы на платформе без ограничений.</p>
</input1>

<details class="faq-item" open>
  <input3>Можно ли отменить подписку?</input3>
  <p>Да, вы можете отменить подписку в любой момент в личном кабинете.</p>
</details>

Вам нужно будет создать два независимых элемента `<details>`. Каждый из них будет содержать свой `<summary>` для вопроса и `<p>` для ответа. Поместите их последовательно друг за другом.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку