Всем привет и сегодня будет рассмотрен тег details который появился в спецификации HTML5. С помощью данного тега мы можем сворачивать и разворачивать для показа информацию по требованию пользователя.

Это выглядит примерно так:

<details >Что то</details>

Здесь у нас появился заголовок 'Подробнее' кликая по которому мы можем показывать и скрывать наш текст в теге details.

Если заголовок тега details нас не устаивает мы можем определить свой собственный через тег summary.

<details >
    <summary >Как мне получить бонус?</summary>
    <p>
        Чтобы получить бонус вам необходимо сделать то то и то то...
    </p>
</details>

В качестве заголовка тега details у нас будет выступать содержимое тега summary.

Внутри details мы можем помещать все что угодно от текста до целых блоков.

<details>
    <summary>Языки программирования</summary>
    <ul>
        <li>С++</li>
        <li>JAVA</li>
        <li>Python</li>
        <li>JavaScipt</li>
    </ul>
</details>

Изначально контент в details у нас скрыт. Если мы хотим чтобы он сразу отображался, нам достаточно добавить атрибут open.

<details open="open">
    <summary>Языки программирования</summary>
    <ul>
        <li>С++</li>
        <li>JAVA</li>
        <li>Python</li>
        <li>JavaScipt</li>
    </ul>
</details>

После использования атрибута open содержимое тега details будет изначально показано пользователю.

Раньше для реализации данного эффекта необходимо было прибегать к использованию javascript. Теперь же достаточно использовать данный тег.

Данный прием прежде всего необходим для удобства пользователей. Если пользователя заинтересует заголовок он по нему кликнет и для него развернется контент по интересующей его теме. Если контент под заголовком не интересует пользователя ему достаточно его свернуть или не открывать. Тем самым повышается вероятность того что пользователь быстрее найдет интересующий его вопрос.

Этот прием часто применяется в FAQ (Часто задаваемые вопросы).

На этом данная статья подошла к концу. Не забывайте оставлять комментарии.

Переходите на мой канал на youtube Вступайте в группу ВК

А я с вами прощаюсь желаю успехов и удачи! Пока!