Accordion
An accordion or alert box that can be styled and used to provide more information to users.
Example
Accordion title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor mauris et nisl lobortis, nec efficitur lectus placerat. Nunc ultricies libero quis justo feugiat, at dapibus ex egestas. Donec cursus euismod mauris, ut pellentesque est scelerisque quis. Vestibulum pellentesque dui ut congue tempor. Morbi sit amet elit nec sapien auctor fringilla.
Implementation
<details class="accordion">
<summary>Title</summary>
<div>...</div>
</details>
About the wrapping div
You should wrap the content that doess not to the header/summary, in an HTML tag (e.g.
p, div) for the opening animation to work.Custom properties
There are several custom properties available that can be
overwritten to control the looks of the table. You can change these properties on the details selector.
| Custom property | Description |
|---|---|
--accordion-border |
Sets the border-color property.
|
--accordion-surface |
Sets background-color property of the header (also known as the summary).
|
--accordion-radius |
Sets border-radius property.
|