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
Related Articles
Deepen your understanding with these curated continuations.
HTML address Tag Guide: Semantic Contact Information
Learn how to use the HTML <address> tag correctly for contact information. Discover best practices for accessibility, SEO, and semantic web structure.
An Intro to HTML <kbd> Tag
Use the HTML kbd semantic tag instead of code tag to denote our text as a keyboard input. Great for preparing documentations...
How to Create Links in Markdown: A Step-by-Step Guide
Learn how to create internal and external links in Markdown. Master the syntax for anchor text, URLs, titles, and automatic email links for better navigation.
