Accordion

Installation

yarn add @neokit/accordion

Import

import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from '@neokit/accordion';

Basic Usage

<Accordion>
  <AccordionItem pb={20}>
    <AccordionButton>Section 1 title</AccordionButton>
    <AccordionPanel>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionButton>Section 2 title</AccordionButton>
    <AccordionPanel>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Accordion Default Index

You can choose the item that will be open from the beginning with defaultIndex prop.

<Accordion defaultIndex={[1]}>
  <AccordionItem pb={20}>
    <AccordionButton>Section 1 title</AccordionButton>
    <AccordionPanel>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionButton>Section 2 title</AccordionButton>
    <AccordionPanel>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Custom Accordion

It provides the bg, color, padding, iconColor props to style the Accordion.

<Accordion>
  <AccordionItem>
    <AccordionButton
      bg="#000000"
      color="#FFFFFF"
      iconColor="#CDCDCD"
      padding="12px 16px">
      Section 1 title
    </AccordionButton>
    <AccordionPanel
      bg="#000000"
      color="#CDCDCD"
      padding="16px">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </AccordionPanel>
  </AccordionItem>
</Accordion>