How Can I Show and Hide Divs with Clicks Using Only CSS and HTML?

<h2>Show Hide Divs on Click Using CSS and HTML</h2>

Achieving collapsible headers similar to those in jQuery Mobile is possible without using jQuery. Here are five examples that demonstrate how to do so:

<h3>1. Using Detail and Summary Tags (Pure HTML)</h3>

HTML5's detail and summary tags offer a simple solution for this problem, eliminating the need for styling or scripting:

<div><div class="snippet-code">
<pre> <summary>Collapse 1</summary>
<p>Content 1...</p>
</details>
<details>
<summary>Collapse 2</summary>
<p>Content 2...</p>
</details></pre>
</div>

The above is the detailed content of How Can I Show and Hide Divs with Clicks Using Only CSS and HTML?. For more information, please follow other related articles on the PHP Chinese website!