Accordion
A set of collapsible panels with headings.
Ingredients
A list of ingredients.
Instructions
A list of instructions.
Additional information
A list of additional information.
<a-accordion>
<h3>Ingredients</h3>
<p>A list of ingredients.</p>
<h3>Instructions</h3>
<p>A list of instructions.</p>
<h3>Additional information</h3>
<p>A list of additional information.</p>
</a-accordion>
<script>
import { AccordionElement } from "@jsxtools/aui/elements/accordion"
customElements.define("a-accordion", AccordionElement)
</script>CSS Parts
CSS parts allow for fine-grained styling and theming. They target specific elements inside the component. An element may have multiple parts, and a part may be used on multiple elements.
| Name | Description |
|---|---|
disclosure |
A group within the accordion |
title |
The title area of a group |
panel |
The content of a group |
open |
A modifier when a disclosure or title is open |
closed |
A modifier when a disclosure or title is closed |