Accordion

The Accordion component is a collapsible content component that allows users to expand and collapse sections of content. It's built using React and provides multiple variants and customization options.

Overview

The Accordion component consists of two main parts:

• Accordion: The main container component that manages the state and renders multiple accordion items
• AccordionItem: Individual accordion items that contain the collapsible content

Basic Usage

import { Accordion } from '@/components/molecules'

const accordionItems = [
  {
    title: 'What is Lorem Ipsum?',
    content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry...'
  },
  {
    title: 'Why do we use it?',
    content: 'It is a long established fact that a reader will be distracted...'
  }
]

function MyComponent() {
  return (
    <Accordion items={accordionItems} />
  )
}

Props

Accordion Props

Prop	Type	Default	Description
items	Array	[]	Array of accordion items with title and content properties
className	string	''	Additional CSS classes for the accordion container
variant	string	'default'	Visual variant of the accordion (default, flush, bordered, shadow, primary, success)
showArrow	boolean	true	Whether to show the chevron arrow icon
alwaysOpen	boolean	false	Allow multiple items to be open simultaneously
defaultOpen	Array<number>	[]	Array of indices that should be open by default

AccordionItem Props

Prop	Type	Default	Description
title	string	-	The title text for the accordion item
children	ReactNode	-	The content to be displayed when expanded
isOpen	boolean	false	Whether the item is currently expanded
onToggle	function	-	Callback function when the item is toggled
showArrow	boolean	true	Whether to show the chevron arrow icon
variant	string	'default'	Visual variant of the accordion item
className	string	''	Additional CSS classes

Variants

The accordion component supports several visual variants:

Default

Standard accordion with borders and rounded corners.

<Accordion items={accordionItems} variant="default" />

Flush

Accordion without rounded corners and background colors.

<Accordion items={accordionItems} variant="flush" />

Bordered

Accordion with distinct borders around each item.

<Accordion items={accordionItems} variant="bordered" />

Shadow

Accordion with shadow effects.

<Accordion items={accordionItems} variant="shadow" />

Primary

Accordion with primary color theme when active.

<Accordion items={accordionItems} variant="primary" />

Success

Accordion with success color theme when active.

<Accordion items={accordionItems} variant="success" />

Examples

Basic Accordion

<Card>
  <h4 className='mb-4'>Basic Accordion</h4>
  <Accordion items={accordionItems} variant='default' />
</Card>

Always Open Accordion

Allow multiple items to be open at the same time:

<Card>
  <h4 className='mb-4'>Accordion Always Open</h4>
  <Accordion 
    items={accordionItems} 
    variant='default' 
    alwaysOpen={true} 
    defaultOpen={[0, 1]} 
  />
</Card>

Accordion Without Arrow

<Card>
  <h4 className='mb-4'>Accordion No Arrow</h4>
  <Accordion items={accordionItems} variant='default' showArrow={false} />
</Card>

Accordion With Arrow

<Card>
  <h4 className='mb-4'>Accordion With Arrow</h4>
  <Accordion items={accordionItems} variant='default' showArrow={true} />
</Card>

Flush Accordion

<Card>
  <h4 className='mb-4'>Accordion Flush without rounded and background color</h4>
  <Accordion items={accordionItems} variant='flush' />
</Card>

Bordered Accordion

<Card>
  <h4 className='mb-4'>Accordion With Bordered</h4>
  <Accordion items={accordionItems} variant='bordered' />
</Card>

Shadow Accordion

<Card>
  <h4 className='mb-4'>Accordion With Shadow</h4>
  <Accordion items={accordionItems} variant='shadow' />
</Card>

Primary Color Accordion

<Card>
  <h4 className='mb-4'>Accordion Primary Color (Active Only)</h4>
  <Accordion items={accordionItems} variant='primary' />
</Card>

Success Color Accordion

<Card>
  <h4 className='mb-4'>Accordion Success Color (Active Only)</h4>
  <Accordion items={accordionItems} variant='success' />
</Card>

Data Structure

The items prop should be an array of objects with the following structure:

const accordionItems = [
  {
    title: 'Section Title',
    content: 'Section content can be any text or JSX elements'
  },
  {
    title: 'Another Section',
    content: 'More content here...'
  }
]

Accessibility

The accordion component includes proper accessibility features:

• Uses semantic HTML with button elements for headers
• Includes aria-expanded attribute to indicate state
• Includes aria-controls attribute to associate headers with content
• Proper keyboard navigation support
• Screen reader friendly

Styling

The accordion component uses Tailwind CSS classes and supports dark mode. Each variant has specific styling:

• Default: Standard borders and rounded corners
• Flush: Minimal styling without borders or backgrounds
• Bordered: Distinct borders around each item
• Shadow: Box shadow effects
• Primary: Blue color theme when active
• Success: Green color theme when active

Customization

You can customize the accordion by:

1. Adding custom CSS classes:

<Accordion 
  items={accordionItems} 
  className="my-custom-accordion" 
/>

2. Using different variants for different use cases
3. Controlling the open state with alwaysOpen and defaultOpen props
4. Customizing the arrow icon by setting showArrow={false}

Best Practices

1. Use descriptive titles that clearly indicate the content
2. Keep content concise but informative
3. Consider using alwaysOpen={true} when users need to compare multiple sections
4. Use appropriate variants based on your design context
5. Test keyboard navigation for accessibility compliance

Related Components

• Card - Often used as a container for accordion components
• NavIcon - Used for the chevron arrow icon
• Button - Similar interactive component patterns