Can I Create Collapsible Headers in HTML and CSS Without JavaScript Libraries?

Implementing Collapsible Headers in HTML and CSS without jQuery

In crafting a mobile website, you may encounter the need for collapsible headers analogous to those provided by jQuery Mobile's Content Collapsible feature. However, if your page is intended for offline use, employing jQuery may seem counterproductive. Can this functionality be achieved using purely HTML and CSS?

HTML5 to the Rescue: Detail and Summary Tags

HTML5 offers a solution that obviates the need for both CSS styling and JavaScript: the and

tags. Let's delve into how to harness their power:

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

By incorporating these tags into your HTML structure, you create expandable and collapsible sections that can be effortlessly toggled without any additional scripting. The

element serves as the collapsible header, and its content is revealed or hidden by clicking or tapping on it.

As you progress further, you'll discover several additional examples that demonstrate other creative approaches to achieving this effect using pure HTML and CSS, catering to your specific requirements.

The above is the detailed content of Can I Create Collapsible Headers in HTML and CSS Without JavaScript Libraries?. For more information, please follow other related articles on the PHP Chinese website!