How Can I Create Collapsible DIVs with Pure HTML and CSS?

Collapsible DIVs Using HTML, CSS

Seeking a method to create hideable and collapsible DIV elements without relying on jQuery? This issue often arises in mobile website design, particularly when offline access is crucial. Using pure HTML and CSS, achieving this functionality is possible.

Solution:

Using HTML5's

and

tags is a viable solution:

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

This approach leverages HTML5's native functionality without the need for additional JavaScript or CSS styling. The

tag represents a collapsible container, while the

tag defines its interactive header. Clicking on the

tag toggles the visibility of the content within the

tag.

The above is the detailed content of How Can I Create Collapsible DIVs with Pure HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!