Set the nested accordion in React Accordion component

30 Jan 20238 minutes to read

Accordion supports to render nested level of Accordion by using content property. You can give nested Accordion content inside the parent Accordion content property by using id of nested element. The nested Accordion can be rendered with the use of provided events, such as clicked and expanding.

index.jsx

import * as React from "react";
import * as ReactDOM from 'react-dom';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';

const nestedMusicNew = () => {
  return (
    <div>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Track1' />
          <AccordionItemDirective header='Track2' />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}
const nestedVideo = () => {
  return (
    <div>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Video Track1' />
          <AccordionItemDirective header='Video Track2' />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}

const nestedMusic = () => {
  return (
    <div>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Music Track1' />
          <AccordionItemDirective header='Music Track2' />
          <AccordionItemDirective header='Music New' content={nestedMusicNew} />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}

const nestedImages = () => {
  return (
    <div>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Track1' />
          <AccordionItemDirective header='Track2' />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}

const ReactApp = () => {
  return (
    <AccordionComponent>
      <AccordionItemsDirective>
        <AccordionItemDirective header='Video' content={nestedVideo} />
        <AccordionItemDirective header='Music' content={nestedMusic} />
        <AccordionItemDirective header='Images' content={nestedImages} />
      </AccordionItemsDirective>
    </AccordionComponent>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);

index.tsx

import * as React from "react";
import * as ReactDOM from 'react-dom';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';

const nestedMusicNew = () => {
  return (
    <div>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Track1' />
          <AccordionItemDirective header='Track2' />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}
const nestedVideo = () => {
  return (
    <div>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Video Track1' />
          <AccordionItemDirective header='Video Track2' />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}

const nestedMusic = () => {
  return (
    <div>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Music Track1' />
          <AccordionItemDirective header='Music Track2' />
          <AccordionItemDirective header='Music New' content={nestedMusicNew} />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}

const nestedImages = () => {
  return (
    <div>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Track1' />
          <AccordionItemDirective header='Track2' />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}

const ReactApp = () => {
  return (
    <AccordionComponent>
      <AccordionItemsDirective>
        <AccordionItemDirective header='Video' content={nestedVideo} />
        <AccordionItemDirective header='Music' content={nestedMusic} />
        <AccordionItemDirective header='Images' content={nestedImages} />
      </AccordionItemsDirective>
    </AccordionComponent>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Accordion Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>