Accordion component

The Accordion component designed with Vue 3 and Tailwind CSS. It includes expandable and collapsible content sections.

Basic Usage

Import and use Accordion in your Vue components as follows:

<template>
  <Accordion :items="accordionItems" name="Accordion 1"/>
</template>

<script setup>
import { Accordion } from '@robuust-digital/vue-components';

const accordionItems = [
  {
    title: 'Title 1',
    content: 'Content 1',
  },
  {
    title: 'Title 2',
    content: 'Content 2 <a href="/">containing a anchor</a>',
  },
  {
    title: 'Title 3',
    content: 'Content 3',
  },
];
</script>

Title 1

Content 1

Title 2

Content 2 containing a anchor

Title 3

Content 3

Props

Below are the props supported by Accordion, which allow you to customize its appearance and behavior:

Prop	Type	Default	Description
items	Array	Required	Set the array with items containing title and content text.
name	String	'accordion'	Set a name of the accordion.
defaultOpenIndex	Number	0	Set the index of the active open item.
contentClass	String	''	Set a class for the content wrapper. (e.g .wysiwyg or .prose for rich text styling)

Customization with Tailwind CSS

To customize the accordion styles globally, extend your Tailwind configuration. Example:

// tailwind.config.js
import components from '@robuust-digital/vue-components/tailwind';

export default {
  // ...
  theme: {
    extend: {
      components: (theme) => ({
        accordion: {
          // Available variables you can override:
          '--rvc-accordion-border-width': theme('borderWidth.DEFAULT'),
          '--rvc-accordion-border-style': theme('borderStyle.solid'),
          '--rvc-accordion-border-color': theme('colors.slate.200'),
          '--rvc-accordion-padding-y': theme('padding.6'),
          '--rvc-accordion-font-weight': theme('fontWeight.normal'),
          '--rvc-accordion-font-size': theme('fontSize.base.0'),
          '--rvc-accordion-color': theme('colors.slate.600'),
          '--rvc-accordion-summary-font-weight': theme('fontWeight.medium'),
          '--rvc-accordion-summary-font-size': theme('fontSize.lg.0'),
          '--rvc-accordion-summary-color': theme('colors.black'),
          '--rvc-accordion-summary-hover-decoration': 'underline',

          // You can also customize elements with CSS
          summary: {
            '&:hover': {
              backgroundColor: 'red',
            },
          },

          // ...
        },
      }),
    },
  },
  plugins: [components],
};

Example

Default Accordion

Title 1

Content 1

Title 2

Content 2 containing a anchor

Title 3

Content 3

Show code

<Accordion :items="accordionItems" name="Accordion 1"/>