Accordion

The accordion component allows users to expand and collapse sections of content. It is commonly used to organize large amounts of information in a compact and user-friendly manner. The accordion can contain various types of content, such as text, images, or other components, and can be customized in terms of appearance and behavior.

Basic Usage

Accordion Item 1lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item1 content

Accordion Item 2lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item2 content

Accordion Item 3lorem ipsum dolor sit amet.

Item3 content

<template>
  <spr-accordion :accordion-items="accordionItems">
    <template #item1>
      Item1 content
    </template>
    <template #item2>
      Item2 content
    </template>
    <template #item3>
      Item3 content
    </template>
  </spr-accordion>
</template>
<script lang="ts" setup>  
  import { ref } from 'vue'

  const accordionItems = ref([
    {
      title: 'Accordion Item 1',
      subtitle: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      collapseId: 'item1'
    },
    {
      title: 'Accordion Item 2',
      subtitle: 'lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      collapseId: 'item2'
    },
    {
      title: 'Accordion Item 3',
      subtitle: 'lorem ipsum dolor sit amet.',
      collapseId: 'item3'
    }
  ])
</script>

Accordion Trigger

By default, the accordion trigger is a button. You can change the trigger element to the header by setting the accordionTrigger prop to header.

Accordion Item 1lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item1 content

Accordion Item 2lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item2 content

Accordion Item 3lorem ipsum dolor sit amet.

Item3 content

<template>
  <spr-accordion :accordion-items="accordionItems" accordion-trigger="header">
    <template #item1>
      Item1 content
    </template>
    <template #item2>
      Item2 content
    </template>
    <template #item3>
      Item3 content
    </template>
  </spr-accordion>
</template>
<script lang="ts" setup>  
  import { ref } from 'vue'

  const accordionItems = ref([
    {
      title: 'Accordion Item 1',
      subtitle: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      collapseId: 'item1'
    },
    {
      title: 'Accordion Item 2',
      subtitle: 'lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      collapseId: 'item2'
    },
    {
      title: 'Accordion Item 3',
      subtitle: 'lorem ipsum dolor sit amet.',
      collapseId: 'item3'
    }
  ])
</script>

Always Open

The alwaysOpen prop allows you to set the accordion items to be always open. This means that when one item is opened, the others will remain open as well.

Accordion Item 1lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item1 content

Accordion Item 2lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item2 content

Accordion Item 3lorem ipsum dolor sit amet.

Item3 content

<template>
  <spr-accordion :accordion-items="accordionItems" :always-open="true">
    <template #item1>
      Item1 content
    </template>
    <template #item2>
      Item2 content
    </template>
    <template #item3>
      Item3 content
    </template>
  </spr-accordion>
</template>
<script lang="ts" setup>  
  import { ref } from 'vue'

  const accordionItems = ref([
    {
      title: 'Accordion Item 1',
      subtitle: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      collapseId: 'item1'
    },
    {
      title: 'Accordion Item 2',
      subtitle: 'lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      collapseId: 'item2'
    },
    {
      title: 'Accordion Item 3',
      subtitle: 'lorem ipsum dolor sit amet.',
      collapseId: 'item3'
    }
  ])
</script>

Default State

By default, the accordion items are hidden. You can change the default state of the accordion items on load by setting the isDefaultOpen to true.

WARNING

The isDefaultOpen prop will only work when the alwaysOpen prop is set to true.

Accordion Item 1lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item1 content

Accordion Item 2lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item2 content

Accordion Item 3lorem ipsum dolor sit amet.

Item3 content

<template>
  <spr-accordion :accordion-items="accordionItems" :is-default-open="true" :always-open="true">
    <template #item1>
      Item1 content
    </template>
    <template #item2>
      Item2 content
    </template>
    <template #item3>
      Item3 content
    </template>
  </spr-accordion>
</template>
<script lang="ts" setup>  
  import { ref } from 'vue'

  const accordionItems = ref([
    {
      title: 'Accordion Item 1',
      subtitle: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      collapseId: 'item1'
    },
    {
      title: 'Accordion Item 2',
      subtitle: 'lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      collapseId: 'item2'
    },
    {
      title: 'Accordion Item 3',
      subtitle: 'lorem ipsum dolor sit amet.',
      collapseId: 'item3'
    }
  ])
</script>

API Reference

Props

Name	Description	Type	Default
accordionItems	Array of objects defining the accordion items. Each item should have the following properties: title (string): Main heading for the accordion item subtitle (string, optional): Additional descriptive text displayed below the title collapseId (string): Unique identifier for the accordion item, used to match with slot names	Array<{ title: string, subtitle?: string, collapseId: string }>	[]
alwaysOpen	When true, multiple accordion items can be expanded simultaneously. When false, opening one item will close any previously opened items.	boolean	false
isDefaultOpen	When true, all accordion items will be expanded by default when the component mounts. Note: This property only works when alwaysOpen is set to true.	boolean	false
accordionTrigger	Determines which element acts as the trigger to expand/collapse accordion items: header: The entire header area (including title and subtitle) acts as the trigger button: Only the toggle button on the right side acts as the trigger	'header' | 'button'	'button'
bordered	When true, the accordion has a border and rounded corners around the entire component. When false, borders are removed for a more minimal appearance.	boolean	true

Slots

Name	Description
${collapseId}	Dynamic slots that correspond to each accordion item's collapseId. Use these slots to add content inside each accordion panel.

AccordionItem Interface

interface AccordionItem {
  title: string;       // Main heading text
  subtitle?: string;   // Optional subheading text
  collapseId: string;  // Unique identifier (used for slot naming)
}