Home > Article > Web Front-end > How to Create a Collapsible Content List with Pure CSS: How do you prevent content from hiding when you click anywhere on the page?
To achieve a collapsible content list with pure CSS, we encounter a challenge: content can be hidden by simply clicking anywhere on the page. This deviates from the desired behavior of hiding content only when the "Hide" link is clicked.
The solution lies in leveraging the :focus and ~ selectors. The revised CSS code:
<code class="css">body { display: block; } .span3:focus ~ .alert { display: none; } .span2:focus ~ .alert { display: block; } .alert { display: none; }</code>
<code class="html"><span class="span3">Hide Me</span> <span class="span2">Show Me</span> <p class="alert">Some alarming information here</p></code>
When the "Hide Me" link (.span3) receives focus, its sibling, the .alert element becomes hidden. Conversely, when the "Show Me" link (.span2) receives focus, its sibling, the .alert element becomes visible. This ensures that the content is hidden or shown only when the corresponding link is clicked, as intended.
The above is the detailed content of How to Create a Collapsible Content List with Pure CSS: How do you prevent content from hiding when you click anywhere on the page?. For more information, please follow other related articles on the PHP Chinese website!