san francisco symphony logo
Pattern Library

accordions


RULES & DEPENDENCIES:

accordion props:

  • allowMultiple - set to true if multiple accordions are allowed to be open at once (optional)
  • mobileOnly - set to true to transform content into accordions appear on mobile only (optional)
  • closeAll - set to true if all accordions are closed on load (optional, by default the first item is open)

accordion-item props:

  • openOnLoad - set to true if you want this item to be open - only the first item is open by default

accordion-item slots:

  • header - this is the clickable header which opens and closes the accordion content
  • content
  • Header 1
  • Header 2
  • Header 3
Grid on desktop, accordions on mobile:
  • Schumann
  • Header 2
  • Header 3