Тег <details> це спойлер, який дозволяє приховати інформацію і показувати її після натискання на значок спойлера. За замовчуванням, спойлер формується у вигляді трикутничка і тексту "детальніше". Якщо Ви хочете замість цього напису вставити свій, то треба скористатися тегом <summary>
Тег <summary> показує заголовок для тега <details> і має стояти першим всередині <details>
Код виглядає так:
<details>
<summary>Інформація про автора</summary>
<p>Пичко Валерій, викладач курсів підвищення кваліфикації НМК ІПО КПІ ім. Ігоря Сікорського </p>
</details>
Готовий результат виглядає так: (натиснить на напис Інформація про автора)
Інформація про автора
Пичко Валерій, викладач курсів підвищення кваліфикації НМК ІПО КПІ ім. Ігоря Сікорського
За допомогою таких тегів можна швидко організувати на сайті тест для самоконтролю із запитаннями та відповідями при натисканні кнопки. Наприклад:
Що означає 404 помилка?
У цьому прикладі код виглядає так:
Відповідь
Запитувану сторінку не знайдено
<details>
<summary><span style="font-size: medium;">
<span style="color: blue;"><b>Відповідь</b></span></span>
</summary>
<p><span style="font-size: medium;"><b>Запитувану сторінку не знайдено</b></span></p>
</details>