Accordion supports to load external contents through AJAX
library. Refer the below steps.
Ajax
module from ej2-base
and initialize with URL path.import * as React from "react";
import * as ReactDOM from "react-dom";
import { Ajax } from '@syncfusion/ej2-base';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
function ReactApp(props) {
return (<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='Department' content='#content1'/>
<AccordionItemDirective header='Platform' content='#content2'/>
<AccordionItemDirective header='Employee Details' content={props.data}/>
</AccordionItemsDirective>
</AccordionComponent>);
}
let ajax = new Ajax('./ajax.html', 'GET', true);
ajax.send().then();
ajax.onSuccess = (dataSt) => {
ReactDOM.render(<ReactApp data={dataSt}/>, document.getElementById("element"));
};
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Accordion Ajax 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.38/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%;
}
div#headername {
margin-left: 100px;
}
</style>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div></div>
<div id="content1" style="display:none">
<ul style="margin : 0px;padding:0px 16px; list-style-type: none">
<li>Testing</li>
<li>Development</li>
</ul>
</div>
<div id="content2" style="display:none">
<ul style="margin : 0px;padding:0px 16px; list-style-type: none">
<li>Mobile</li>
<li>Web</li>
</ul>
</div>
</body>
</html>
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Ajax } from '@syncfusion/ej2-base';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
function ReactApp(props) {
return (
<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='Department' content='#content1' />
<AccordionItemDirective header='Platform' content='#content2' />
<AccordionItemDirective header='Employee Details' content={props.data} />
</AccordionItemsDirective>
</AccordionComponent>
);
}
let ajax: Ajax = new Ajax('./ajax.html', 'GET', true);
ajax.send().then();
ajax.onSuccess = (dataSt: string): void => {
ReactDOM.render(<ReactApp data={dataSt} />, document.getElementById("element") as HTMLElement);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);