@volvo-cars/accordion-component

Accordion

Basic usage

<Accordion label="Accordion example">
  <Block as="p">...text</Block>
</Accordion>

Usage with parent state

const MultipleControlledAccordions = () => {
  const [active, setActive] = useState(-1);

  return (
    <>
      {times(4).map((d, i) => (
        <Accordion
          label={`Accordion example ${i + 1}`}
          key={i}
          onChange={() => setActive(i)}
          isOpen={i === active}
        >
          <Content />
        </Accordion>
      ))}
    </>
  );
};

Props

Props	Type	Description	Required	Default
label	string	Label	✔︎	null
children	jsx	Children for the Accordion's expandable content section	✔︎	null
onChange	func	Callback fired when accordion open state is changed		null
extend	object	Extend styles of accordion		null
extendContent	object	Extend styles of accordion content		null