How Can I Toggle Div Visibility with HTML and CSS Only?

Toggle Display of Divs on Click Using HTML and CSS

In this article, we aim to provide a solution to the challenge of showing and hiding divs on click using HTML and CSS techniques, without the dependency on JavaScript libraries like jQuery.

Using HTML5 Elements

Leveraging the HTML5 tags detail and summary, you can achieve collapsible div functionality without additional styling or scripting. These tags offer native support for creating collapsible sections:

<details><br>  <summary>Collapse 1</summary><br>  <p>Content 1...</p>
<br></details><br><details><br>  <summary>Collapse 2</summary><br>  <p>Content 2...</p>
<br></details><br>

Additional CSS for Styling

While the above approach handles the collapsible behavior, you may want to enhance the visual appearance of your divs. Here's an example CSS snippet:

details {<br>  border: 1px solid #ccc;<br>  margin-top: 10px;<br>  padding: 10px;<br>}<br>summary {<br>  background: #eee;<br>  cursor: pointer;<br>  padding: 5px;<br>  display: block;<br>}<br>summary:hover {<br>  background: #ccc;<br>}<br>

By implementing these techniques, you can create collapsible sections in HTML and CSS effectively, without the need for jQuery or other JavaScript libraries.

The above is the detailed content of How Can I Toggle Div Visibility with HTML and CSS Only?. For more information, please follow other related articles on the PHP Chinese website!