If you’re unfamiliar with <details>, it’s an element that creates a ‘disclosure widget’ in which information is visible only when the widget is toggled to an “open” state.
You should include in it a <summary> element, which is used for the text describing the disclosure.
If you omit the <summary>, a browser-specific string like “Details” will be used by default.
Click the two elements below to toggle them between open and closed states and notice the missing <summary> in the first one:
<details> <p>
The response phrase for 413 "Content Too Large" used to be "Payload Too
Large", and this message is still widely used.
</p> </details> <details> <summary>System configuration</summary> <ul> <li>200GB RAM</li> <li>4PB storage</li> </ul> </details> Since an accordion is a series of expandable sections that allow users to show or hide content, a series of <details> elements can be used to create an accordion-like interface.
With the use of the name attribute, as we’ll see later, these elements can closely mimic the behavior of common accordions, in which only one section can be open at a time, with other sections automatically closing when a new one is expanded.
There’s great potential for <details> elements to fit into your pages because some minimal styling can go a long way to create interactive accordions using only HTML and CSS.
<details> <summary>System configuration</summary> <ul> <li>200GB RAM</li> <li>4PB storage</li> </ul> </details> <details> <summary>Recommended settings</summary> <ul> <li>Extreme mode: on</li> <li>Raytracing: enabled</li> </ul> </details> <details> <summary>Other details</summary> <ul> <li>Material: Faux Leather, Metal</li> <li>Item Weight: 10.2Kg</li> </ul> </details> 
