Accordion

The Accordion component is a flexible and accessible component that allows users to expand and collapse content sections. It supports custom content, styling, and smooth animations while maintaining accessibility standards.

Import

import { Accordion } from 'h2o-library';

Basic Usage

Simple Accordion

<Accordion
  title="Basic Accordion"
  isOpen={true}
  setIsOpen={() => {}}
>
  <p>This is a basic accordion with simple content.</p>
</Accordion>

Accordion with Rich Content

<Accordion
  title="Rich Content Accordion"
  isOpen={true}
>
  <div className="space-y-4">
    <p>This accordion contains rich content with multiple elements:</p>
    <ul className="list-disc pl-5">
      <li>Multiple paragraphs</li>
      <li>Lists and sublists</li>
      <li>Interactive elements</li>
    </ul>
    <div className="bg-gray-100 p-4 rounded-lg">
      <h4 className="font-semibold mb-2">Additional Information</h4>
      <p>This is a styled section within the accordion content.</p>
    </div>
  </div>
</Accordion>

Custom Styled Accordion

<Accordion
  title="Custom Styled Accordion"
  isOpen={true}
  setIsOpen={() => {}}
  className="border-2 border-purple-500 rounded-lg p-4"
>
  <div className="space-y-4">
    <p>This accordion has custom styling applied:</p>
    <ul className="list-disc pl-5">
      <li>Custom border and padding</li>
      <li>Rounded corners</li>
      <li>Custom background colors</li>
    </ul>
  </div>
</Accordion>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
title	string	-	The title of the accordion section
isOpen	boolean	-	Whether the accordion is expanded
setIsOpen	(isOpen: boolean) => void	-	Callback to update the open state
children	React.ReactNode	-	The content of the accordion
className	string	-	Additional CSS classes for the accordion

Design Considerations

• Clear visual hierarchy with title and content
• Consistent spacing and alignment
• Visual feedback for interactions
• Support for rich content and custom styling
• Smooth animations for expanding/collapsing
• Custom styling options for both container and content
• Proper icon rotation for open/closed states
• Responsive design for different screen sizes

Accessibility

• Proper ARIA attributes for accordion role
• Keyboard navigation support
• Screen reader announcements
• Proper heading structure
• Focus management
• Clear visual indicators for interactive elements
• Proper contrast for all text elements
• Support for reduced motion preferences
• Proper icon and text alignment
• Semantic HTML structure