Disclosure & Accordion
Details Element
- developer.mozilla.org/en-US/docs/Web/HTML/Element/details
- developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
The summary element is usually displayed with a leading arrow.
You can apply some limited styling or hide it by selecting it with summary::marker or the non-standard summary::-webkit-details-marker.
Browser support for that is currently limited, though.
[MDN,
MDN,
caniuse,
caniuse]
The expansion and collapsing of details can be animated [linkedlist.ch].
Browsers may support exclusive accordions by having a shared name attribute among multiple details elements
[chrome-dev, webkit.org].
The details element currently cannot be expanded or collapsed automatically using CSS based on certain media conditions [whatwg/html#8401].