How Can I Hide and Show Content in CSS Without Using JavaScript?

Hide and Show Content with CSS, No JavaScript Required

In the pursuit of a clean and efficient UI, it is essential to have the ability to hide and show content. Traditionally, JavaScript has been the go-to solution for this task. However, using CSS offers a simpler and more performant alternative.

Initial Attempt

One possible approach using CSS is to employ the ':focus' pseudo-class. Let's examine the original CSS snippet provided:

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

Problem Encountered

While this approach successfully hides the content when the 'Hide' link is clicked, it also allows the content to be hidden by clicking anywhere on the page. This behavior is undesirable, as it diminishes the intended functionality of the 'Hide' link.

Improved Solution

To address this issue, we introduce a slightly modified CSS structure:

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

Functionality

In this improved solution, the ':focus' pseudo-class is applied to two elements, '.span3' and '.span2', which represent the 'Hide' and 'Show' links respectively. When the 'Hide' link ('.span3') gains focus, it hides the element with the class '.alert', which contains the hidden content. Conversely, when the 'Show' link ('.span2') gains focus, it displays the '.alert' element.

Advantages

This approach offers several benefits:

• No JavaScript Required: It relies solely on CSS, making it easier to implement and maintain.
• Targeted Hiding: The content is only hidden when the 'Hide' link is clicked, preventing unintended hiding from other page interactions.
• Minimal Changes: It requires only minor modifications to the original CSS, preserving the intended behavior.

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