How to create collapsible content using HTML5 details tag

Vishnu Damwala

Last updated on Sep 1, 2020 1 min read

HTML5 provides <details>...</details> tag for the purpose of show and hide the contents on demand. Instead of showing large content on single page where user has to scroll explicitly, details widget comes handy to decrease your view length and looks much cleaner

If a browser does not support the details tag, then all content inside will be visible by default. So none of your content gets lost due to lack of support. Though you can go through for details tag support in Can I Use.

Example

<details>
  <summary>India 🇮🇳</summary>
  <p>
    India, officially the Republic of India (Hindi: Bhārat Gaṇarājya | भारत
    गणराज्य).
  </p>
  <p>
    Indian heritage and culture are vast and vivid due to the large number of
    religious groups residing in it. Every community has its own set of
    traditions and customs which it passes on to its younger generation.
  </p>
</details>

Output

India 🇮🇳

India, officially the Republic of India (Hindi: Bhārat Gaṇarājya | भारत गणराज्य).

Indian heritage and culture are vast and vivid due to the large number of religious groups residing in it. Every community has its own set of traditions and customs which it passes on to its younger generation.

Happy coding

HTML Tutorial