В современном дизайне сайтов отдается предпочтение простоте и функциональности. Мы хотим разместить на странице как можно больше информации, но при этом стремимся, чтобы эта информация не превратилась в кашу и не привела к худшему: посетителю сайта в этом море контента невозможно быстро добраться до нужной информации.
Одним из элементов страницы есть скрытый блок с текстом (а может быть и с другим контентом). По клику на какой-либо элемент, кнопку, ссылку (Читать еще, Подробнее, Больше информации), этот скрытый блок появляется во всей своей красе. Для этого используются технологии HTML+CSS+JS. В принципе, все просто и самодостаточно, но с одним важным "но":
Это все не быстро и требует особых знаний. Ну никак не для контент-менеджера.
Но тут как раз приходят на помощь не особо известные и, поэтому, не особо жалуемые теги <details> и <summary>
Итак, создадим следующий HTML-код:
<details>
<summary>
Кликни меня!
</summary>
<p>
Контент, который изначально будет скрыт:
</p>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там своего пор домах силуэт диких власти буквенных ему эта правилами, имеет. О, вопроса единственное!
</p>
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там своего пор домах силуэт диких власти буквенных ему эта правилами, имеет. О, вопроса единственное!
</p>
</details>
В итоге получаем следующий чудесный результат:
Кликни меня!
Контент, который изначально будет скрыт:
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там своего пор домах силуэт диких власти буквенных ему эта правилами, имеет. О, вопроса единственное!
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там своего пор домах силуэт диких власти буквенных ему эта правилами, имеет. О, вопроса единственное!
Назначение тэгов для оформления контента, раскрывающегося по клику:
С этим все предельно просто.
Тэг <details> - обрамляющий тэг для всего контента, который мы будем скрывать/раскрывать. (По умолчанию - блочный элемент).
Внутри него могут быть абсолютно любой контент, любые тэги. Разумеется кроме тегов типа <body>, <html> и т.п.
Обратите внимание, весь контент внутри <details> будет изначально скрыт...
кроме... И тут мы подходим ко второму тэгу, используемому, как правило, в паре с предудущим: <summary>
Тэг <summary> - текст внутри него показывается, не скрыт. Это именно то, по чему мы кликнем, и раскроется тот контент, который изначально скрыт. Это, можно сказать заголовок-переключатель всей <details>-конструкции
То есть, все то, что находится внутри <details>, но не внутри <summary> в начале скрыто.
Кроссбраузерность тэгов <details> и <summary>
Мы, конечно же заботимся о том, чтобы любой посетитель, с любого устройства, с любым браузером мог удобно пользоваться нашими сайтами.
Выше описанные теги корректно работают во всех браузерах. Отличился Internet Exploirer, при чем всех версий. Но Microsoft Edge уже поддерживает в полном объеме. ИЕ же, воспринимает <details> как обычный <div>. Его содержимое всегда видимо.
По моему мнению, данными тэгами можно и даже нужно смело пользоваться. ИЕ юзаем на момент описания статьи менее 1%. И даже посетитель, зашедший на наш сайт через этот браузер, ничего не потеряет - он просто увидит весь скрытый контент сразу.
Кстати, если хотим сделать конструкцию <details> / <summary> еще более красивой - css в помощь.
На эти теги можно повесить класс, можно задавать стили на прямую, можно задавать стили тэгам внутри. В общем, работаем как с остальным обычным HTML-контентом
