Skip to main content Accessibility Feedback

JavaScript-Free Components


Use the details and summary elements to create accordions.

Put your entire accordion content inside a details element. The heading that should act as a toggle goes inside a summary element. Use the open attribute to make your accordion expanded by default.

	<summary>The toggle</summary>
	The content.

<details open>
	<summary>Another toggle</summary>
	Expanded by default

You can style the dropdown arrow with CSS.

 * 1. Styling for Firefox and other non-webkit/blink browsers
 * 2. Styling for webkit and blink
summary, /* 1 */
summary::-webkit-details-marker { /* 2 */
	list-style-image: url('');

Accordion Demo →