Скрытие и отображение контента с помощью CSS: трюк без JavaScript

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

Скрыть/показать переключатель контента:

Можно использовать CSS для создания переключателя контента, который позволяет пользователям скрывать и показывать список элементов. Следующий фрагмент демонстрирует эту функциональность:

#cont {
  display: none;
}
.show:focus   .hide {
  display: inline;
}
.show:focus   .hide   #cont {
  display: block;
}

Задача:

Хотя приведенный выше CSS и достигает желаемого эффекта, он сталкивается с недостатком. Когда контент отображается, его можно скрыть, просто щелкнув в любом месте страницы. Такое поведение нежелательно, так как мы хотим, чтобы содержимое скрывалось только при нажатии ссылки «Скрыть».

Решение:

Чтобы решить эту проблему, выполните следующие действия: Можно использовать пересмотренный код CSS и HTML:

CSS:

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}

HTML:

Hide Me
Show Me
Some alarming information here

Благодаря этим изменениям предупреждающее сообщение будет скрыто только при нажатии элемента диапазона «Скрыть меня». Это решение эффективно решает проблему и предоставляет метод на основе CSS для скрытия и отображения контента без использования JavaScript.