The details tag creates an expandable/collapsible element on your page, with an always-visible summary which can be tapped or clicked to hide or show the content. You can use the name attribute on details tags to create a simple accordion with no javascript.
This is a details tag
The line above is the summary. This is the content. Clicking or tapping the summary will hide or show the content.
The html code for a details tag
<details open name="accordion">
<summary>This is a details tag</summary>
<p>The line above is the summary. This is the content.</p>
</details>The open attribute
Details tags are collapsed by default. To render an expanded details tag, add the open attribute.
The name attribute
Details tags can have a name attribute. Details tags with the same name attribute are mutually-exclusive, so only one can be open at a time.
A details tag with the same name
When a details tag is opened, other details tags with the same name attribute will close.
And another one
This can be used to create a simple accordion with no javascript.