By default, all Accordion panels are collapsible. You can customize the Accordion to keep one panel as
expanded state always. This is applicable for Single expand mode.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
let clickEle;
class ReactApp extends React.Component {
render() {
this.clickEle = this.props.data;
return (<AccordionComponent ref={acrdn => this.acrdnInstance = acrdn} expandMode='Single' clicked={this.clicked.bind(this)} expanding={this.expanding.bind(this)}>
<AccordionItemsDirective>
<AccordionItemDirective expanded='true' 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 MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.'/>
<AccordionItemDirective header='JavaScript' content='JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.'/>
</AccordionItemsDirective>
</AccordionComponent>);
}
expanding(e) {
if (this.acrdnInstance) {
let expandCount = this.acrdnInstance.element.querySelectorAll('.e-selected').length;
let ele = this.acrdnInstance.element.querySelectorAll('.e-selected')[0];
if (ele) {
ele = ele.firstChild;
}
if (expandCount === 1 && ele === this.clickEle) {
e.cancel = true;
}
}
}
clicked(e) {
this.clickEle = e.originalEvent.target.closest('.e-acrdn-header');
}
}
ReactDOM.render(<ReactApp data={clickEle}/>, document.getElementById("element"));<!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.3.56/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 } from '@syncfusion/ej2-react-navigations';
import { ExpandEventArgs, AccordionClickArgs} from '@syncfusion/ej2-navigations';
let clickEle: HTMLElement;
class ReactApp extends React.Component<{}, {}> {
public acrdnInstance:AccordionComponent;
public clickEle;
render() {
this.clickEle = this.props.data;
return (
<AccordionComponent ref={acrdn => this.acrdnInstance = acrdn} expandMode='Single' clicked= {this.clicked.bind(this)} expanding= {this.expanding.bind(this)}>
<AccordionItemsDirective>
<AccordionItemDirective expanded='true' 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 MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' />
<AccordionItemDirective header='JavaScript' content= 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.' />
</AccordionItemsDirective>
</AccordionComponent>
);
}
public expanding (e: ExpandEventArgs) {
if (this.acrdnInstance) {
let expandCount: number = this.acrdnInstance.element.querySelectorAll('.e-selected').length;
let ele: HTMLElement= this.acrdnInstance.element.querySelectorAll('.e-selected')[0];
if (ele) {
ele = ele.firstChild as Element
}
if (expandCount === 1 && ele === this.clickEle) {
e.cancel = true;
} }
}
public clicked (e: AccordionClickArgs ) {
this.clickEle = (e.originalEvent.target as Element).closest('.e-acrdn-header');
}
}
ReactDOM.render(<ReactApp data={clickEle}/>, document.getElementById("element"));