The <details> element
An element which contains information that is mostly normally hidden, with just a summary part visible, but which the user can reveal by clicking on it.
Uses of <details>
This element is intended for markup which includes information which often will not be needed, and so is hidden by default.
Users will initially see only a summary of the content, perhaps a message describing what the full content contains.
The summary should be enclosed in a <summary> element inside the <details> element.
The summary must be the first thing (apart from whitespace) inside the <details> element.
That means that the summary will appear first in browsers which don't support this feature, and is spoken first by speech-based browsers.
There should only be one <summary> element.
Users who want to access it can choose to expand the summary to display the full content of the element.
If the open attribute is present then the details will be expanded to start with, but the user has the choice of hiding them.
Whether you should have the details initially expanded or collapsed will depend on what you think will make the page easier to use.
Collapsible details can also be used when a complex form consists of a series of sections, when the user is only likely to be interested in a few of them, or will want to focus on one or two at a time.
Rather than showing every form control at once, the form can be divided into pieces, each in its own <details> element, with a section title as the summary.
Another place where the <details> element could be useful is for collapsible outlines or hierarchical menus which might be overwhelmingly large if fully expanded.
For example, a blog or news website might have links to its date-based archive pages in a set of nested bullet lists containing links.
In that case, each sublist could be contained in a <details> element.
The <details> elements themselves can be nested, so clicking on a year might expand a list of months, which could each themselves be expanded into a list of days or articles published in that period.
Example markup
Here's an example of using <details> to provide access to part of a form which some users may need, but which for most users would just clutter up the form and make it harder to use:
<form ...>
...
<details>
<summary>Advanced Settings</summary>
<label>Something: <input ...></label>
...
</details>
</form>Browser support
Currently this feature is supported by Google Chrome, Safari, and Opera. There's no support for it in Internet Explorer, and Firefox will only have support from version 48 onwards.
There are several JavaScript polyfills available, such as this jQuery plugin by Mathias Bynens.
This makes <details> work in all modern browsers, and even in IE 6.
Live example
The content below this paragraph is contained in a <details> element.
If your browser supports it, then you should be able to click on the summary to show or hide the details below it.
There is no custom styling or JavaScript polyfill here, so what you see below is the default way your browser implements this feature.
The open attribute is not included, so the browser should only show the summary to start with.
This is the summary
And these are the details. If you can see this paragraph without doing anything to expand the details, then your browser doesn't support this feature.
A second paragraph inside the <details> element.
This paragraph is below the <details> element.
Full list of attributes
All the usual HTML global attributes are available
open- Indicates that the full content of the element should be visible.