Accordion items can be added dynamically by passing the item and index value with the addItem method.
In the following demo, you can add the accordion content by expanding any accordion header content using expanded event.
Data is fetched from the data source.
The data is formatted as a JSON object with header and content fields.
Here last index is calculated to append the new accordion at the end.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-react-navigations';
// @ts-ignore
import { accordion } from '../datasource.tsx';
let dbFlag = 0;
let dynamciAcrdnCount = 2;
export class ReactApp extends React.Component {
render() {
return (<div className='control-pane'>
<div className='control-section accordion-control-section'>
<div className='control Accordion-sample'>
<AccordionComponent expanded={this.expanded.bind(this)} ref={acrdn => this.acrdnInstance = acrdn}>
<AccordionItemsDirective>
<AccordionItemDirective header='ASP.NET' content='Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.'/>
<AccordionItemDirective header='ASP.NET Core' content='ASP.NET Core is a free and open-source web framework, and the next generation of ASP.NET, developed by Microsoft and the community. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET Core.'/>
<AccordionItemDirective header='ASP.NET MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.'/>
</AccordionItemsDirective>
</AccordionComponent>
</div></div>
</div>);
}
expanded(e) {
let Elementindex = document.getElementsByClassName("e-expand-state e-selected e-active")[0];
if ([].slice.call(e.element.parentElement.children).indexOf(e.element) == [].slice.call(e.element.parentElement.children).indexOf(Elementindex)) {
let array = accordion;
for (let i = 0; i < dynamciAcrdnCount; i++) {
if (dbFlag === array.length) {
return;
}
this.acrdnInstance.addItem(array[dbFlag], this.acrdnInstance.items.length);
++dbFlag;
}
}
}
}
ReactDOM.render(<ReactApp />, document.getElementById('sample'));import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective, ExpandEventArgs, AccordionItemModel } from '@syncfusion/ej2-react-navigations';
// @ts-ignore
import { accordion } from '../datasource.tsx';
let dbFlag: number = 0;
let dynamciAcrdnCount: number = 2;
export class ReactApp extends React.Component<{}, {}> {
acrdnInstance: AccordionComponent | any;
render() {
return (
<div className='control-pane'>
<div className='control-section accordion-control-section'>
<div className='control Accordion-sample'>
{/* Render the Accoridon Component */}
<AccordionComponent expanded= {this.expanded.bind(this)} ref={acrdn => this.acrdnInstance = acrdn}>
<AccordionItemsDirective>
<AccordionItemDirective header='ASP.NET' content='Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.' />
<AccordionItemDirective header='ASP.NET Core' content='ASP.NET Core is a free and open-source web framework, and the next generation of ASP.NET, developed by Microsoft and the community. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET Core.' />
<AccordionItemDirective header='ASP.NET MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' />
</AccordionItemsDirective>
</AccordionComponent>
</div></div>
</div>
);
}
public expanded (e: ExpandEventArgs) {
let Elementindex = document.getElementsByClassName("e-expand-state e-selected e-active")[0];
if([].slice.call((e.element as any).parentElement.children).indexOf(e.element) == [].slice.call((e.element as any).parentElement.children).indexOf(Elementindex)) {
let array: AccordionItemModel[] = accordion as AccordionItemModel[];
for(let i: number = 0 ; i < dynamciAcrdnCount; i++)
{
if (dbFlag === array.length) {
return; }
this.acrdnInstance.addItem( array[dbFlag] , this.acrdnInstance.items.length );
++dbFlag;
}
}
}
}
ReactDOM.render(<ReactApp />, document.getElementById('sample'));<!DOCTYPE html>
<html>
<head>
<title>Syncfusion React 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" />
<link href="index.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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%;
}
.accordion-control-section {
margin: 0 10% 0 10%;
}
@media screen and (max-width: 768px) {
.accordion-control-section {
margin: 0;
}
}
</style>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>