Skip to main content

Nested accordion

AccordionItem can have a nested accordion. When navigating through items with keyboard arrow keys, focus will stay within the same level. Use the tab key to move to other levels.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

import { Accordion, AccordionItem } from '@szhsin/react-accordion';

export default function Example() {
  return (
    <Accordion>
      <AccordionItem header="Primary item 1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </AccordionItem>

      <AccordionItem header="Primary item 2" initialEntered>
        <Accordion>
          <AccordionItem header="Secondary item 1" initialEntered>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
            do eiusmod tempor incididunt ut labore et dolore magna
            aliqua.
          </AccordionItem>

          <AccordionItem header="Secondary item 2">
            Suspendisse massa risus, pretium id interdum in, dictum sit
            amet ante. Fusce vulputate purus sed tempus feugiat.
          </AccordionItem>
        </Accordion>
      </AccordionItem>

      <AccordionItem header="Primary item 3">
        Suspendisse massa risus, pretium id interdum in, dictum sit amet
        ante. Fusce vulputate purus sed tempus feugiat.
      </AccordionItem>
    </Accordion>
  );
}