Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupComboboxIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

Component Collapse

A collapse section simplifies the user interface by condensing long content into collapsible content sections.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing.
<som-button
  id="collapseLink"
  class="mr-2"
  type="button"
  button-type="clear"
  color="primary"
  aria-expanded="false"
  onclick="document.getElementById('collapseExample').toggle()"
>
  Toggle Content
</som-button>
<som-button
  id="collapseButton"
  type="button"
  color="primary"
  aria-expanded="false"
  onclick="document.getElementById('collapseExample').toggle()"
>
  Toggle content
</som-button>
<som-collapse id="collapseExample" collapsed="true">
  <div class="d-none pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
</som-collapse>

Props

AttrTypeDefaultDocs

collapsed

boolean

false

This boolean property that sets the initial state of the collapse element.

Methods

NameReturnsDocs

hide

Promise will resolve after the hide animation ends.

This method hides content regardless of the current state.

refresh

Promise

DEPRECATED - This method was used to recalculate and update the tab content height. We do not need to call this method anymore since content height is automatically updated internally.

show

Promise will resolve after the show animation ends.

This method shows the collapse content regardless of the current state.

toggle

Promise will resolve after the toggle animation ends.

This method toggles the collapse content. Toggle will show content if it is currently hidden or hide content if it is currently visibile.

Events

EventDetailDocs

collapseToggled

any

Event triggered anytime the component is toggled.

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.

Open source