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('');
}
⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price.
Find this useful? You can support my work by purchasing an annual membership.