TIP

Don't specify padding and margin for Accordion.Item.Collapse, this will break the animation.

Basic usage

By default, the accordion has the secondary theme (use property).

import Accordion from '@semcore/ui/accordion';
import type { NSAccordion } from '@semcore/ui/accordion';
import type { NSBox } from '@semcore/ui/base-components';
import React from 'react';

type ExampleAccordionProps = NSAccordion.Props & { duration?: number } & NSAccordion.Item.Collapse.Props & NSBox.Props;

const Demo = (props: ExampleAccordionProps) => {
  const [value, onChange] = React.useState([0]);

  return (
    <Accordion value={value} onChange={(value: any) => onChange(value)} duration={props.duration} use={props.use}>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 2}>
          <Accordion.Item.Toggle w={props.w} h={props.h}>
            <Accordion.Item.ToggleButton>
              <Accordion.Item.Chevron />
              Section
              {' '}
              {index + 1}
            </Accordion.Item.ToggleButton>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse overflowHidden={props.overflowHidden} defaultHeight={props.defaultHeight}>
            This is section {index + 1}
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export const defaultProps: ExampleAccordionProps = {
  duration: undefined,
  use: undefined,
  overflowHidden: undefined,
  defaultHeight: undefined,
  w: undefined,
  h: undefined,
};

Demo.defaultProps = defaultProps;

export default Demo;

One section opening

value can take both values: single and array of values. By changing it, you change the behavior of the component.

import Accordion from '@semcore/ui/accordion';
import React from 'react';

const Demo = () => {
  const [value, onChange] = React.useState(null); // or []
  return (
    <Accordion value={value} onChange={onChange}>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 2}>
          <Accordion.Item.Toggle>
            <Accordion.Item.ToggleButton>
              <Accordion.Item.Chevron />
              Section
              {' '}
              {index + 1}
            </Accordion.Item.ToggleButton>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse>
            This is section {index + 1}
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export default Demo;

Heading tag

By default, Accordion.Item.Toggle is set to an h3 heading level, but you can change it if needed.

import Accordion from '@semcore/ui/accordion';
import React from 'react';

const Demo = () => {
  const [value, onChange] = React.useState(null); // or []
  return (
    <Accordion value={value} onChange={onChange}>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 2}>
          <Accordion.Item.Toggle tag='h2'>
            <Accordion.Item.ToggleButton>
              <Accordion.Item.Chevron />
              Section
              {' '}
              {index + 1}
            </Accordion.Item.ToggleButton>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse>
            This is section {index + 1}
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export default Demo;

Primary accordion

Pass use='primary' to enable the primary theme for the accordion.

import Accordion from '@semcore/ui/accordion';
import React from 'react';

const Demo = () => {
  return (
    <Accordion use='primary'>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 2}>
          <Accordion.Item.Toggle>
            <Accordion.Item.ToggleButton>
              <Accordion.Item.Chevron />
              Section
              {' '}
              {index + 1}
            </Accordion.Item.ToggleButton>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse>
            This is section {index + 1}
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export default Demo;

SEO friendly accordion

By default, collapsed sections aren't rendered in the DOM. If you need to render all sections, pass preserveNode to the Accordion.Item.Collapse component.

import Accordion from '@semcore/ui/accordion';
import { Box } from '@semcore/ui/base-components';
import React from 'react';

const Demo = () => {
  const [value, onChange] = React.useState([0]);

  return (
    <Accordion value={value} onChange={(value: any) => onChange(value)}>
      {[...new Array(3)].map((_, index) => (
        <Accordion.Item value={index} key={index} disabled={index === 1}>
          <Accordion.Item.Toggle>
            <Accordion.Item.ToggleButton>
              <Accordion.Item.Chevron />
              Section
              {' '}
              {index + 1}
            </Accordion.Item.ToggleButton>
          </Accordion.Item.Toggle>
          <Accordion.Item.Collapse preserveNode>
            <Box>
              {`This is section ${index + 1}`}
              ,
              {' '}
              and it contains a
              {' '}
              <a href='#'>focusable link</a>
            </Box>
          </Accordion.Item.Collapse>
        </Accordion.Item>
      ))}
    </Accordion>
  );
};

export default Demo;