Accordion Item
<quiet-accordion-item>
An individual section within an accordion, consisting of a header and content that shows when expanded.
This component must only be used within an accordion. You can see some examples of accordion items being used in the accordion documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-accordion-item> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/accordion-item/accordion-item.js';
To manually import <quiet-accordion-item> from npm, use the following code.
import '@quietui/quiet/dist/components/accordion-item/accordion-item.js';
Slots Jump to heading
Accordion Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The content to show when expanded. |
icon
|
The expand/collapse icon. |
label
|
The accordion item's label. For plain-text labels, you can use the label attribute
instead.
|
Properties Jump to heading
Accordion Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
label
|
The accordion item's label. If you need to provide HTML in the label, use the
label slot instead.
|
|
string
|
|
appearance
|
The accordion item's appearance. This will be set automatically by the accordion controller. |
|
'normal'
|
'normal'
|
iconPosition
icon-position
|
The position of the expand/collapse icon. This will be set automatically by the accordion controller. |
|
'start'
|
'end'
|
disabled
|
Disables the accordion item. |
|
boolean
|
false
|
Methods Jump to heading
Accordion Item supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods
| Name | Description | Arguments |
|---|---|---|
focus() |
Sets focus to the accordion item. | |
blur() |
Removes focus from the accordion item. | |
animateExpand() |
Animate the expansion of the body - called by the accordion controller | |
animateCollapse() |
Animate the collapse of the body - called by the accordion controller |
CSS parts Jump to heading
Accordion Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
header |
The accordion item's header that contains the label and icon. |
::part(header)
|
label |
The label container. |
::part(label)
|
icon |
The icon container. |
::part(icon)
|
body |
The accordion item's body that contains the content. |
::part(body)
|
content |
The content wrapper inside the body. |
::part(content)
|
Custom States Jump to heading
Accordion Item has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
disabled |
Applies when the accordion item is disabled. |
:state(disabled)
|
expanded |
Applies when the accordion item is expanded. |
:state(expanded)
|
Dependencies Jump to heading
Accordion Item automatically imports the following elements. Sub-dependencies are also included in this list.