Details Accordion
Native accordion implementation with custom marker styling and ::details-content pseudo-element.
Structure
Semantic disclosure widget using the native <details> and <summary> elements.
<details>
<summary>
Summary Title
</summary>
Body
</details>
Custom Marker Control
Replace default disclosure triangle with custom content using ::marker pseudo-element.
details summary::marker {
font-family: "Material Icons";
}
details:not([open]) summary::marker {
content: 'arrow_right' / 'right'; /* Using Google Icons */
}
details[open] summary::marker {
content: 'arrow_drop_down' / 'down'; /* Using Google Icons */
}
Details Content Styling
Apply styles directly to expanded content using the ::details-content pseudo-element.
details[open]::details-content {
border: 2px dashed #9f9f9f;
padding: 0.5rem;
} <details>
<summary>
Summary Title
</summary>
Body
</details>
<style>
details {
border: 1px solid #ccc;
border-radius: 0.25rem;
margin: 1rem;
}
summary {
padding: 0.5rem;
cursor: pointer;
}
details summary::marker {
font-family: "Material Icons";
}
details:not([open]) summary::marker {
content: 'arrow_right' / 'right'; /* Using Google Icons */
}
details[open] summary::marker {
content: 'arrow_drop_down' / 'down'; /* Using Google Icons */
}
details[open]::details-content {
border: 2px dashed #9f9f9f;
padding: 0.5rem;
}
</style>