Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

details html

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

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

<details >Что то</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 Вступайте в группу ВК

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

Оцените статью

Еще статьи

JavaScript ошибки

Пространство имен php

Теги текста HTML

iframe javaScript

Переменные окружения PHP

phpmailer php

Модальные окна python

selection javascript

read-write css

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.