MerelyUI

Accordion

Accordion component for showing and hiding content with only one item open at a time. It toggles between collapsed and expanded states.
  • PropType
    data *Array that contains title and content and secondary
    title *String
    content *React Element
    secondary Hides the button
    theme Theme element

  • 1. Add your data

    First, create your data. In the below, I’ve provided an example data.

    constdata=[
    {
    title:'Accordion Title',
    content:(
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic, officia blanditiis? Quidem molestias praesentium quibusdam quis cupiditate laborum, consequatur nulla illo error ratione autem voluptatibus placeat iusto ullam velit obcaecati.</p>)
    },
    title:'Accordion Title 2',
    content:(
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic, officia blanditiis? Quidem molestias praesentium quibusdam quis cupiditate laborum, consequatur nulla illo error ratione autem voluptatibus placeat iusto ullam velit obcaecati.</p>)
    ]

  • Default Accordion

    <Accordiondata={data}/>

  • Secondary Accordion

    Accordion without the buttons.

    <Accordionsecondarydata={data}/>