Fisht

Accordion

Accordion is a flexible component for displaying collapsible and expandable sections of content.

Basic

The Accordion component allows you to display content in collapsible sections. Users can expand and collapse individual sections to view or hide their content.

Content for section 1

Content for section 2

Content for section 2

Answer to FAQ 1

Answer to FAQ 2

<Accordion :dataSource="[
  { title: 'Section 1', subtitle: 'Content for section 1' },
  { title: 'Section 2', subtitle: 'Content for section 2', open: true },
  { title: 'Section 3', subtitle: 'Content for section 3' }
]">
</Accordion>
<Accordion :dataSource="[
  { title: 'FAQ 1', subtitle: 'Answer to FAQ 1' },
  { title: 'FAQ 2', subtitle: 'Answer to FAQ 2' }
]" :multiple="true">
</Accordion>

The basic usage of the Accordion component involves providing a dataSource array that defines the sections and their content.

Multiple Sections

The multiple prop allows multiple sections to be open at the same time.

Preparing your body for workout

Building muscle and endurance

Improving cardiovascular health

Helping your body recover

Fueling your workouts

<Accordion :dataSource="[
  { title: 'Item 1', subtitle: 'Details for item 1' },
  { title: 'Item 2', subtitle: 'Details for item 2' }
]" :multiple="true">
</Accordion>

Animation Duration

The animationDuration prop controls how quickly sections open or close, measured in milliseconds.

Opens quickly

Opens quickly

Opens slowly

Opens slowly

<Accordion :dataSource="[
  { title: 'Fast', subtitle: 'Opens quickly' },
  { title: 'Slow', subtitle: 'Opens slowly' }
]" :animationDuration="1000">
</Accordion>

Icon Type

The icon prop specifies the icon used for the accordion toggle.

Supported icons:

  • "ChevronDown": A chevron icon pointing down.
  • "ArrowDownCircle": A circular arrow-down icon.
  • "Plus": A plus icon for expand/collapse.

Common questions and answers

Browse our product range

See what our customers say

Details about our shipping process

Our policy for returns and refunds

List of ingredients for the recipe

Step-by-step cooking guide

Nutritional facts and values

Ideas for serving the dish

Comments and ratings from users

<Accordion :dataSource="[
  { title: 'Chevron Style', subtitle: 'Uses ChevronDown icon' },
  { title: 'Arrow Style', subtitle: 'Uses ArrowDownCircle icon' }
]" icon="ChevronDown">
</Accordion>
<Accordion :dataSource="[
  { title: 'Chevron Style', subtitle: 'Uses ChevronDown icon' },
  { title: 'Arrow Style', subtitle: 'Uses ArrowDownCircle icon' }
]" icon="ArrowDownCircle">
</Accordion>

Custom Classes

You can customize the appearance of the accordion with the following class props:

  • class: CSS class for the accordion container.
  • classItem: CSS class for individual accordion items.
  • classTitle: CSS class for the title of an accordion item.
  • classSubtitle: CSS class for the subtitle of an accordion item.
Class
Item Class
Title Class
Subtitle Class

Custom styles applied

<Accordion 
  :dataSource="[
    { title: 'Styled Item', subtitle: 'Custom styles applied' }
  ]"
  class="custom-accordion"
  classItem="custom-item"
  classTitle="custom-title"
  classSubtitle="custom-subtitle">
</Accordion>

Slots

The title slot lets you customize the content displayed in the accordion header.

Uses default title slot

This section has a custom title

<Accordion :dataSource="[
  { title: 'Default Title', subtitle: 'Uses default title slot' },
  { title: 'Custom Title', subtitle: 'This section has a custom title' }
]">
  <template #title="{ title }">
    <span>
      ๐Ÿ”– {{ title }}
    </span>
  </template>
</Accordion>
ยฉ 2025 FishtVue by Egoka