React
Demos
Support
Forum
Download
Search results

Set the nested Accordion in React Accordion component

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.

Source
Preview
index.jsx
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
class ReactApp extends React.Component {
    render() {
        return (<AccordionComponent expanding={this.expanding.bind(this)} ref={acrdn => this.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>);
    }
    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"));
    }
    expanding(e) {
        if (e.isExpanded && [].indexOf.call(this.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(this.acrdnInstance.items, e.item) === 1) {
            if (e.element.querySelectorAll('.e-accordion').length > 0) {
                return;
            }
            ReactDOM.render(<AccordionComponent expanding={this.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(this.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"));
        }
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective, ExpandEventArgs } from '@syncfusion/ej2-react-navigations';

class ReactApp extends React.Component<{}, {}> {
public acrdnInstance:AccordionComponent;
  render() {
       return (
        <AccordionComponent expanding= {this.expanding.bind(this)} ref={acrdn => this.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>
       );
  }
  public 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);
  }
  public expanding (e: ExpandEventArgs) {
  if (e.isExpanded && [].indexOf.call(this.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(this.acrdnInstance.items, e.item) === 1) {
    if (e.element.querySelectorAll('.e-accordion').length > 0) {
      return;
    }
  ReactDOM.render(<AccordionComponent expanding= {this.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(this.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);
  }
  }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element") as HTMLElement);
<!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/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>
Previous
Next