components

Accordion (code)

An accordion component is a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

code

design

Lorem ipsum dolor sit amet

Neque porro quisquam est qui

Maecenas pellentesque quam nec aliquam tempus

import { Accordion, AccordionItem } from '@mediahuis/chameleon-react'

<Accordion id="myAccordion">
  <AccordionItem title="Lorem ipsum dolor sit amet">
    <Paragraph>
      Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut
      convallis sollicitudin sodales. Nullam pellentesque magna et mattis
      vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat.
      Duis a tempus sem, eu aliquet enim.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Neque porro quisquam est qui">
    <Paragraph>
      Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl.
      Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula
      ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem
      condimentum maximus eu quis tellus.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Maecenas pellentesque quam nec aliquam tempus">
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
</Accordion>

<Accordion id="myAccordion">
  <AccordionItem title="Lorem ipsum dolor sit amet">
    <Paragraph>
      Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut
      convallis sollicitudin sodales. Nullam pellentesque magna et mattis
      vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat.
      Duis a tempus sem, eu aliquet enim.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Neque porro quisquam est qui">
    <Paragraph>
      Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl.
      Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula
      ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem
      condimentum maximus eu quis tellus.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Maecenas pellentesque quam nec aliquam tempus">
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
</Accordion>

Props

Name	Type	Default	Required	Description
children	Node	-	-	Children of type AccordionItem
collapsible	Boolean	-	-	Whether or not when clicking on an AccordionItem it can collapse again.
id	String	-	true	The Accordion's id (Needed for a11y implementation)
initialExpandedIndex	Number	-1	-	The initial expanded/open AccordionItem index started at 0. -1 means all
onChange	Function	() => {}	-	Callback function when an item inside the Accordion changes the expandedIndex

System Props

m, mb, ml, mr, mt, mx, my

float

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Children

All direct children of an Accordion must be AccordionItem components. However, the children of the AccordionItem components can be any component.

Lorem ipsum dolor sit amet

Neque porro quisquam est qui

Maecenas pellentesque quam nec aliquam tempus

<Accordion id="myAccordion">
  <AccordionItem title="Lorem ipsum dolor sit amet">
    <Flex justifyContent="space-between" alignItems="flex-end">
      <TextField label="My form" />
      <Button>Submit</Button>
    </Flex>
  </AccordionItem>
  <AccordionItem title="Neque porro quisquam est qui">
    <BrandedHeading>Breaking title</BrandedHeading>
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Maecenas pellentesque quam nec aliquam tempus">
    <img
      src="http://placekitten.com/500/200"
      alt="cat"
      style={{
        maxWidth: '100%',
        height: 'auto',
        width: 'auto',
      }}
    />
  </AccordionItem>
</Accordion>

<Accordion id="myAccordion">
  <AccordionItem title="Lorem ipsum dolor sit amet">
    <Flex justifyContent="space-between" alignItems="flex-end">
      <TextField label="My form" />
      <Button>Submit</Button>
    </Flex>
  </AccordionItem>
  <AccordionItem title="Neque porro quisquam est qui">
    <BrandedHeading>Breaking title</BrandedHeading>
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Maecenas pellentesque quam nec aliquam tempus">
    <img
      src="http://placekitten.com/500/200"
      alt="cat"
      style={{
        maxWidth: '100%',
        height: 'auto',
        width: 'auto',
      }}
    />
  </AccordionItem>
</Accordion>

InitialExpandedIndex

default: -1

To have one item open by default on initial render, pass in the initialExpandedIndex index.

Lorem ipsum dolor sit amet

Neque porro quisquam est qui

Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl. Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem condimentum maximus eu quis tellus.

Maecenas pellentesque quam nec aliquam tempus

<Accordion id="myAccordion" initialExpandedIndex={1}>
  <AccordionItem title="Lorem ipsum dolor sit amet">
    <Paragraph>
      Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut
      convallis sollicitudin sodales. Nullam pellentesque magna et mattis
      vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat.
      Duis a tempus sem, eu aliquet enim.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Neque porro quisquam est qui">
    <Paragraph>
      Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl.
      Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula
      ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem
      condimentum maximus eu quis tellus.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Maecenas pellentesque quam nec aliquam tempus">
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
</Accordion>

<Accordion id="myAccordion" initialExpandedIndex={1}>
  <AccordionItem title="Lorem ipsum dolor sit amet">
    <Paragraph>
      Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut
      convallis sollicitudin sodales. Nullam pellentesque magna et mattis
      vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat.
      Duis a tempus sem, eu aliquet enim.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Neque porro quisquam est qui">
    <Paragraph>
      Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl.
      Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula
      ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem
      condimentum maximus eu quis tellus.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Maecenas pellentesque quam nec aliquam tempus">
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
</Accordion>

Collapsible

default: false

By default, once an item has been opened, it can only be closed by opening another. If you want to allow users to close all items, set collapsible to true.

Lorem ipsum dolor sit amet

Neque porro quisquam est qui

Maecenas pellentesque quam nec aliquam tempus

<Accordion id="myAccordion" collapsible={true}>
  <AccordionItem title="Lorem ipsum dolor sit amet">
    <Paragraph>
      Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut
      convallis sollicitudin sodales. Nullam pellentesque magna et mattis
      vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat.
      Duis a tempus sem, eu aliquet enim.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Neque porro quisquam est qui">
    <Paragraph>
      Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl.
      Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula
      ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem
      condimentum maximus eu quis tellus.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Maecenas pellentesque quam nec aliquam tempus">
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
</Accordion>

<Accordion id="myAccordion" collapsible={true}>
  <AccordionItem title="Lorem ipsum dolor sit amet">
    <Paragraph>
      Nunc congue vehicula lacus, condimentum tincidunt sapien aliquet id. Ut
      convallis sollicitudin sodales. Nullam pellentesque magna et mattis
      vehicula. Etiam aliquam magna feugiat, lobortis justo eu, commodo erat.
      Duis a tempus sem, eu aliquet enim.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Neque porro quisquam est qui">
    <Paragraph>
      Maecenas risus tellus, pulvinar ullamcorper aliquam ut, luctus quis nisl.
      Donec laoreet mi ac nunc fringilla facilisis. Aliquam sollicitudin ligula
      ut ligula dignissim, sed placerat magna scelerisque. Sed ac nulla vel sem
      condimentum maximus eu quis tellus.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Maecenas pellentesque quam nec aliquam tempus">
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
</Accordion>