dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS: незакрывающийся details

элемент details, который открывается только раз и никогда не закрывается

dr.Brain

время чтения 1 мин.

Элементы details и summaryотлично подходят для того, чтобы скрыть небольшой фрагмент текста. По умолчанию содержимое блока details скрыто. Виджет элемента details обычно представлен небольшим треугольником, который меняет свое положение при раскрытии или скрытии контента. Содержимое блока summary, являющегося первым дочерним элементом блока detail, используется в качестве метки виджета раскрытия.

Давайте рассмотрим ситуацию, в которой мы можем только раскрыть содержимое элемента, не имея возможности скрыть его в дальнейшем. Полагаю, это не самая лучшая идея, и, уж точно, такой вариант использования элемента details сейчас не имеет широкого распространения. Однако, это не означает, что такой поход не будет востребован в дальнейшем. Тем более для этого нужно создать всего пару строк кода:

details[open] summary {
  display: none;
}

А вот и действующий вариант:


Спасибо за внимание.


По материалам статьи Chris Coyier “Creating a Details Element That Opens But Never Closes”.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.