Component Accordion
This component makes a webpage easier to use by putting content into parts that can be opened and closed. It's used with the accordion group component.
Example
Props
| Attr | Type | Default | Docs |
|---|---|---|---|
collapsed | boolean | true | This boolean controls if the accordion is collapsed or expanded. |
icon | string | The property is the name of an icon that will display before the headline. | |
label | string | This property will be the accordion button label. |
Methods
| Name | Returns | Docs |
|---|---|---|
hide | Promise will resolve after the hide animation ends. | This method hides content regardless of the current state. |
show | Promise will resolve after the show animation ends. | Show the collapse content regardless of the current state. |
toggle | Promise will resolve after the toggle animation ends. | This method will toggle the collapse content. Toggle will show content if it is currently hidden or hide content if it is currently visibile. |
Events
| Event | Detail | Docs |
|---|---|---|
accordionToggled | boolean | This event will be triggered any time the accordion is toggled. |
Parts
| Name | Docs |
|---|---|
accordion | This part is the full accordion container. |
arrow | This part is the arrow icon that indicates if the accordion is open or closed. |
button | This part is the button that triggers toggling the accordion content. |
button-open | This part is the button that triggers toggling the accordion content in the open state. |
icon | This part is the icon next to the label. |
label | This part is the accordion label. |
Do you have an idea, or want to help us improve this page? Reach out to us via email.
DTMB-DG-Support@michigan.govNeed help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.