CSS: незакрывающийся details
элемент details, который открывается только раз и никогда не закрывается
Элементы details
и summary
отлично подходят для того, чтобы скрыть небольшой фрагмент текста. По умолчанию содержимое блока details
скрыто. Виджет элемента details
обычно представлен небольшим треугольником, который меняет свое положение при раскрытии или скрытии контента. Содержимое блока summary
, являющегося первым дочерним элементом блока detail
, используется в качестве метки виджета раскрытия.
Давайте рассмотрим ситуацию, в которой мы можем только раскрыть содержимое элемента, не имея возможности скрыть его в дальнейшем. Полагаю, это не самая лучшая идея, и, уж точно, такой вариант использования элемента details
сейчас не имеет широкого распространения. Однако, это не означает, что такой поход не будет востребован в дальнейшем. Тем более для этого нужно создать всего пару строк кода:
details[open] summary {
display: none;
}
А вот и действующий вариант:
Спасибо за внимание.
По материалам статьи Chris Coyier “Creating a Details Element That Opens But Never Closes”.