Home > Article > Web Front-end > How to Hide/Show Content with CSS Only and Prevent Accidental Hiding?
Hide/Show Content-List with CSS Only
Problem:
How to hide/show content using only CSS without JavaScript, while ensuring that the content is only hidden by clicking the "Hide" button and not by clicking anywhere on the page.
Initial Solution:
The provided HTML and CSS code allows hiding and showing content, but the content can be hidden by clicking anywhere on the page.
Solution:
To resolve this issue, use the following modified CSS:
<code class="css">body { display: block; } .span3:focus ~ .alert { display: none; } .span2:focus ~ .alert { display: block; } .alert { display: none; }</code>
And update the HTML structure accordingly:
<code class="html"><span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert">Some alarming information here</p></code>
How It Works:
This solution uses the ~ (sibling) selector in CSS to target elements that are siblings of the focused element. When the "Hide Me" button is focused, it sets the adjacent .alert element to display: none;, hiding the content. Conversely, when the "Show Me" button is focused, it sets the adjacent .alert element to display: block;, showing the content.
The above is the detailed content of How to Hide/Show Content with CSS Only and Prevent Accidental Hiding?. For more information, please follow other related articles on the PHP Chinese website!