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
Post a Comment