I experimented with details and summary earlier today. They’re used to create clickable headers that hide/reveal elements. The ‘details’ container holds the ‘summary’ element and any other elements whose visibility should be toggled. Clicking the ‘summary’ element hides or reveals those elements.

Here’s a simple CodePen to show a little of it. View it in CodePen to see the code:

• MDN: <details>: The Details disclosure element
• MDN: <summary>: The Disclosure Summary element