Accordion

Example Usage

This accordion panel is open by default

<script>
  import { AccordionGroup, Accordion } from "@fanny-pack-ui/svelte-kit";
</script>

<AccordionGroup
  border={true} 
  groupPadding="var(--accordion-default-group-padding)" 
  accordionTitlePadding="var(--accordion-default-title-padding)" 
  fontSize="var(--accordion-default-font-size)" 
  spaceBetweenAccordions="var(--accordion-default-space-between-accordions)"
>
  <Accordion id="123" title="Accordion 1" open={true}>
    <p>This accordion panel is open by default</p>
  </Accordion>

  <Accordion title="Accordion 2">
    <p>Accordion content</p>
  </Accordion>

  <Accordion title="Accordion 3">
    <p>Accordion content</p>
  </Accordion>
</AccordionGroup>

Setting border={true} on the <AccordionGroup> adds a border around a group of accordion menus to give the group a unified appearance. But you can also use the <Accordion> components without a border:

<script>
  import { Accordion } from "@fanny-pack-ui/svelte-kit";
</script>

<AccordionGroup border={false} groupPadding="25px">
  <Accordion title="Accordion 1">
    <p>Accordion content</p>
  </Accordion>

  <Accordion title="Accordion 2">
    <p>Accordion content</p>
  </Accordion>

  <Accordion title="Accordion 3">
    <p>Accordion content</p>
  </Accordion>
</AccordionGroup>

Note that you can set the groupPadding prop to zero to have the accordions stretch to the edges of their parent element.

Props

AccordionGroup

Prop name	Type	Possible values	Default value	Description
`border` (optional)	`boolean`	`true`, `false`	`true`	Add a border around a group of accordion menus to give the group a unified appearance.
`groupPadding` (optional)	`string`	Any CSS padding value or CSS size variable from your `theme.css` file.	`var(--accordion-default-group-padding)`	The value that is passed to this prop will be applied as the padding between the border and the accordions.
`accordionTitlePadding` (optional)	`string`	Any CSS padding value or CSS size variable from your `theme.css` file.	`var(--accordion-default-title-padding)`	Alter the padding of the accordion buttons.
`fontSize` (optional)	`string`	Any CSS font size value or CSS font size variable from your `theme.css` file.	`var(--accordion-default-font-size)`	Alter the font size of the accordion panels.
`spaceBetweenAccordions` (optional)	`string`	Any CSS margin value or CSS size variable from your `theme.css` file.	`var(--accordion-default-space-between-accordions)`	The value that is passed to this prop will be applied as the margin below each of the accordion buttons.

Slots

AccordionGroup

Slot name	Default value	Description
Default slot	NA	You can nest as many `<Accordion>` components as you want in between the opening `<AccordionGroup>` and closing `</AccordionGroup>` tags.