39 HTML <details> and <summary> Examples
This collection showcases the native HTML mechanism for creating interactive content: the <details> and <summary> tags. Forget bulky JS libraries for accordions; this solution ensures high performance and out-of-the-box functionality. The demos illustrate how pure CSS can style the open state (via the [open] selector) and customize the default marker to build modern UI components.
Last updated:
Dropdown Menu with Tailwind and Alpine.js
A native <details> dropdown component enhanced with Alpine.js for state management and smooth transitions. It features a rotating chevron icon, a custom-styled summary that removes the default marker, and a checklist where selected items are boldly highlighted using Tailwind CSS peer-checked utilities.
CSS Accordion with Custom Animated Arrows
A pure CSS accordion based on native <details>/<summary> elements, where the standard marker is hidden, and a custom animated chevron arrow is created and controlled exclusively via clip-path: polygon() and the rotate property upon expansion.
CSS Tabs Component using Details Tag (No JS)
A multi-functional CSS tabs component built using the native <details> tag and the name attribute, which enables grouped tab behavior where only one tab can be open simultaneously, all without JavaScript.
Tabs Based on the Details Tag
Explore a clean solution for creating exclusive, accessible tab groups by leveraging a Mutation Observer (via jQuery) to manage the state of <details> elements, preventing accidental closures and ensuring only one content panel is open at a time.
Exclusive Accordion with Tailwind and interpolate-size
A high-performance, smooth accordion that expands to the content’s natural height, looking and feeling like a complex JS solution but running entirely on the browser engine.
Details and Summary
An excellent example of a semantic UI pattern where only native HTML is used to create a large accordion list, ensuring high performance.
Details and Summary with Animated Arrow
A classic yet clean example of marker customization on <summary> via the CSS ::before pseudo-element, which smoothly rotates when the element opens using the [open] selector.
Details Element for Help Text
A clean, semantically correct UI element providing supplemental form information using only native <details> and CSS, thus maintaining high accessibility (A11y) standards.
