Search results

To keep single pane open always

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.

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';
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;
    }
}
ReactDOM.render(<ReactApp data={clickEle}/>, document.getElementById("element"));
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
  }
  if (expandCount === 1 && ele === this.clickEle) {
    e.cancel = true;
  } }
   }
  public clicked (e: AccordionClickArgs ) {
    this.clickEle = e.originalEvent.target
  }
}
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/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>