Accordion

A vertically stacked set of interactive headings that each reveal a section of content.
# Demo

Single:

Multiple:

# Attributes
NameTypeDefaultDetails
classNamestring' 'You can customise by passing tailwind classes.
itemClassNamestring' 'You can customise by passing tailwind classes.
triggerClassNamestring' 'You can customise by passing tailwind classes.
contentClassNamestring' 'You can customise by passing tailwind classes.
typeAccordionTypesAccordionTypes.SINGLEYou can pass type of the accordion.
itemsAccordionListItem[]RequiredYou 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;