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.

Get the UI kit

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

View code

<style>
  #accordionEl::part(accordion) {
    background: #ffffff;
    border: 1px solid #d0d0d0;
  }
  #accordionEl::part(button) {
    padding: .5rem;
  }
  #accordionEl::part(label) {
    font-size: 1rem;
    font-variation-settings: "wght" 500;
  }
</style>
<som-accordion label="Sample label (default styles)" icon="search" class="mb-2">
  <som-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </som-content>
</som-accordion>
<som-accordion label="Sample label (custom styles)" id="accordionEl" icon="search">
  <som-content padding="1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </som-content>
</som-accordion>

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.

Healthy

Healthy content is accurate and represents our most up-to-date recommendations.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.