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
