How Can I Hide and Show Content with CSS Without JavaScript?

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:

<code class="css">#cont {
  display: none;
}
.show:focus + .hide {
  display: inline;
}
.show:focus + .hide + #cont {
  display: block;
}</code>

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:

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

HTML:

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

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.

The above is the detailed content of How Can I Hide and Show Content with CSS Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!