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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
function ReactApp() {
let acrdnInstance;
return (<AccordionComponent expanding={expanding} ref={acrdn => acrdnInstance = acrdn}>
<AccordionItemsDirective>
<AccordionItemDirective header='Video' content='<div id="nested_video"></div>'/>
<AccordionItemDirective header='Music' content='<div id="nested_music"></div>'/>
<AccordionItemDirective header='Images' content='<div id="nested_images"></div>'/>
</AccordionItemsDirective>
</AccordionComponent>);
function nestedExpand(e) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
ReactDOM.render(<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='New Track1'/>
<AccordionItemDirective header='New Track2'/>
</AccordionItemsDirective>
</AccordionComponent>, document.getElementById("nested_musicNew"));
}
function expanding(e) {
if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 0) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
ReactDOM.render(<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='Video Track1'/>
<AccordionItemDirective header='Video Track2'/>
</AccordionItemsDirective>
</AccordionComponent>, document.getElementById("nested_video"));
}
else if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 1) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
ReactDOM.render(<AccordionComponent expanding={nestedExpand}>
<AccordionItemsDirective>
<AccordionItemDirective header='Music Track1'/>
<AccordionItemDirective header='Music Track2'/>
<AccordionItemDirective header='Music New' content='<div id="nested_musicNew"></div>'/>
</AccordionItemsDirective>
</AccordionComponent>, document.getElementById("nested_music"));
}
else if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 2) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
ReactDOM.render(<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='Track1'/>
<AccordionItemDirective header='Track2'/>
</AccordionItemsDirective>
</AccordionComponent>, document.getElementById("nested_images"));
}
}
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);<!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="//cdn.syncfusion.com/ej2/20.4.48/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>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
</body>
</html>import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective, ExpandEventArgs } from '@syncfusion/ej2-react-navigations';
function ReactApp() {
let acrdnInstance: AccordionComponent;
return (
<AccordionComponent expanding={expanding} ref={acrdn => acrdnInstance = acrdn} >
<AccordionItemsDirective>
<AccordionItemDirective header='Video' content='<div id="nested_video"></div>' />
<AccordionItemDirective header='Music' content='<div id="nested_music"></div>' />
<AccordionItemDirective header='Images' content='<div id="nested_images"></div>' />
</AccordionItemsDirective>
</AccordionComponent>
);
function nestedExpand(e: ExpandEventArgs) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
ReactDOM.render(<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='New Track1' />
<AccordionItemDirective header='New Track2' />
</AccordionItemsDirective>
</AccordionComponent>, document.getElementById("nested_musicNew") as HTMLElement);
}
function expanding(e: ExpandEventArgs) {
if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 0) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
ReactDOM.render(<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='Video Track1' />
<AccordionItemDirective header='Video Track2' />
</AccordionItemsDirective>
</AccordionComponent>, document.getElementById("nested_video") as HTMLElement);
} else if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 1) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
ReactDOM.render(<AccordionComponent expanding={nestedExpand}>
<AccordionItemsDirective>
<AccordionItemDirective header='Music Track1' />
<AccordionItemDirective header='Music Track2' />
<AccordionItemDirective header='Music New' content='<div id="nested_musicNew"></div>' />
</AccordionItemsDirective>
</AccordionComponent>, document.getElementById("nested_music") as HTMLElement);
} else if (e.isExpanded && [].indexOf.call(acrdnInstance.items, e.item) === 2) {
if (e.element.querySelectorAll('.e-accordion').length > 0) {
return;
}
ReactDOM.render(<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='Track1' />
<AccordionItemDirective header='Track2' />
</AccordionItemsDirective>
</AccordionComponent>, document.getElementById("nested_images") as HTMLElement);
}
}
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);