Component Accordion Group

This component serves as a wrapper for a group of accordion components. It's used with the accordion component.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

View code

<styles>
  .accordionGroupEl::part(accordion) {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-top: none;
  }
  .accordionGroupEl:first-child::part(accordion) {
    border-top: 1px solid #d0d0d0;
  }
</styles>
<som-accordion-group>
  <som-accordion icon="locked" label="Account locked">
    <som-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </som-content>
  </som-accordion>
  <som-accordion icon="password" label="Forgot password">
    <som-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </som-content>
  </som-accordion>  
  <som-accordion icon="phone" label="Contact us">
    <som-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </som-content>
  </som-accordion>
</som-accordion-group>

Props

Attr	Type	Default	Docs
borders	boolean	false	This boolean adds or removes the border for the accordion group.
single-open	boolean	true	This boolean determines if multiple accordions can be open at the same time.

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.