Interactive view hide / expand collapse control in HTML without JavaScript

This post describes how to create an interactive view/hide or expand/collapse control in HTML without JavaScript.

The HTML to create this control is as follows:

<details>
    <summary>Show details...</summary>
    <p>Here are the details!</p>
</details>

By default, this will start collapsed / hidden:

Details...

Here are the details!


You can add the "open" attribute to start the control in a visible / expanded state:

<details open>
    <summary>Show details...</summary>
    <p>Here are the details!</p>
</details>
Details...

Here are the details!


Related Posts

Remove border from details summary element in CSS


Comments

Popular posts from this blog

LG TV This app will now restart to free up more memory

LG TV Clear All Browsing History Data

LG TV turn off Quick Start in settings