Hiding and Showing Content with CSS: A Trick Without JavaScript

When working with web development, controlling the visibility of content is often essential. Traditionally, this is achieved using JavaScript, but CSS can also be used to create elegant hiding and showing effects. One such technique is described below, addressing a specific challenge encountered with previous approaches.

Hide/Show Content Toggle:

One can employ CSS to create a content toggle that allows users to hide and show a list of items. The following snippet demonstrates this functionality:

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

The Challenge:

While the above CSS achieves the desired effect, it faces a drawback. When the content is displayed, it can be hidden by simply clicking anywhere on the page. This behavior is undesirable, as we only want the content to be hidden when the "Hide" link is clicked.

Solution:

To address this issue, the following revised CSS and HTML code can be used:

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

With these changes, the alert message will only be hidden when the "Hide Me" span element is clicked. This solution effectively solves the problem and provides a CSS-based method for hiding and showing content without relying on JavaScript.