Accordion

A controller for multiple collapsible elements, allowing either one open panel at a time or infinite.

Showcase
  • Content of panel 0
  • Content of panel 1
  • Content of panel 2
  • Content of panel 3
  • Content of panel 4
Source
<Accordion let:closeOtherPanels>
  {#each [0, 1, 2, 3, 4] as idx}
    <AccordionSection on:panel-open={closeOtherPanels}>
      <div slot="handle" let:toggle>
        <Button on:click={toggle}>
          open panel {idx}
          <ChevronDownIcon size="20" class="ml accordion-chevron" />
        </Button>
      </div>
      Content of panel {idx}
    </AccordionSection>
  {/each}
</Accordion>

Properties #

Functional Properties

Name
Default
Type
Description
multiple false boolean Setting this to true allows multiple panels to be open at the same time.
... any Everything else will be passed to the underlying <ul> element.

Class Properties

All <Accordion> components use the .accordion class.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the component.

Slots #

Default slot

The content of the Accordion. Pass one or more AccordionSection components or something miscellaneous.

Prop Name
Type
Description
closeOtherPanels Function A callback to force-close all panels except for the calling one.