An Accordion component is a UI element that allows users to expand and collapse sections of content. It is commonly used to organize information in a compact and accessible manner, displaying only the headers by default and revealing the associated content when clicked. This helps improve the readability of complex or lengthy information by reducing clutter on the page.

# Demo

Single:

Multiple:

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
itemClassName	string	' '	You can customise by passing tailwind classes.
triggerClassName	string	' '	You can customise by passing tailwind classes.
contentClassName	string	' '	You can customise by passing tailwind classes.
type	AccordionTypes	AccordionTypes.SINGLE	You can pass type of the accordion.
items	AccordionListItem[]	Required	You can pass list of accordion items.

# Usage

import { NAccordion, AccordionTypes } from 'nayan';

const Accordion = () => {
  const items = [
    { title: 'Heading 1', message: 'Description 1' },
    { title: 'Heading 2', message: 'Description 2' }
  ];

  return (
    <div>
      <h1 className="text-text mb-3 text-lg">Single:</h1>
      <NAccordion type={AccordionTypes.SINGLE} items={items} />
      <h1 className="text-text mb-3 mt-5 text-lg">Multiple:</h1>
      <NAccordion type={AccordionTypes.MULTIPLE} items={items} />
    </div>
  );
};

export default Accordion;