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.