Skip to main content Accessibility Feedback

JavaScript-Free Components

Disclosure

Use the details and summary elements to create expand-and-collapse disclosure components.

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

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

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

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('');
}

Disclosure Demo →

Join the Lean Web Club! Coaching. Courses. Coding resources. Get the skills, confidence, and support you need to learn front-end web development and achieve long-term success.


Find this useful? You can support my work by purchasing an annual membership.