React Accordion - Getting Started
jQuery
Angular
Vue
React
The Accordion UI component contains several panels displayed one under another.
This tutorial shows how to add an Accordion to the page and configure the component's core settings. As a result, you will create the following UI component:
Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository.
Create an Accordion
jQuery
Add DevExtreme to your jQuery application and use the following code to create an Accordion:
$(function() { $("#accordion").dxAccordion({ }); });
<html> <head> <!-- ... --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css"> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.1.7/js/dx.all.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body> <div id="accordion"></div> </body> </html>
Angular
Add DevExtreme to your Angular application and use the following code to create an Accordion:
<dx-accordion></dx-accordion>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxAccordionModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxAccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
Add DevExtreme to your Vue application and use the following code to create an Accordion:
<template> <DxAccordion /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxAccordion } from 'devextreme-vue/accordion'; export default { components: { DxAccordion } } </script>
React
Add DevExtreme to your React application and use the following code to create an Accordion:
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Accordion } from 'devextreme-react/accordion'; function App() { return ( <Accordion /> ); } export default App;
Bind Accordion to Data
You can display Accordion data from dataSource or items array. Note that each data source object must contain the title field whose value specifies the panel's title. If you want to customize the title, refer to the following section of this tutorial: Customize Item Appearance.
jQuery
$(function() { $("#accordion").dxAccordion({ dataSource: employees }); });
<head> <!-- ... --> <script type="text/javascript" src="data.js"></script> </head>
const employees = [{ ID: 1, Prefix: 'Mr.', FirstName: 'John', LastName: 'Heart', Position: 'CEO', State: 'California', BirthDate: '1964/03/16', }, { ID: 2, Prefix: 'Mrs.', FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', State: 'California', BirthDate: '1981/06/03', }, { ID: 3, Prefix: 'Mr.', FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', State: 'Arkansas', BirthDate: '1974/09/07', }, { ID: 4, Prefix: 'Ms.', FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', State: 'Georgia', BirthDate: '1977/11/22', }];
Angular
<dx-accordion [dataSource]="employees" > </dx-accordion>
import { Component } from '@angular/core'; import { Employee, Service } from './app.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], }) export class AppComponent { employees: Employee[]; constructor(private service: Service) { this.employees = service.getEmployees(); } }
import { Injectable } from '@angular/core'; export class Employee { ID: number | undefined; FirstName: string | undefined; LastName: string | undefined; Prefix: string | undefined; Position: string | undefined; BirthDate: string | undefined; State: string | undefined; } const employees: Employee[] = [{ ID: 1, Prefix: 'Mr.', FirstName: 'John', LastName: 'Heart', Position: 'CEO', State: 'California', BirthDate: '1964/03/16', }, { ID: 2, Prefix: 'Mrs.', FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', State: 'California', BirthDate: '1981/06/03', }, { ID: 3, Prefix: 'Mr.', FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', State: 'Arkansas', BirthDate: '1974/09/07', }, { ID: 4, Prefix: 'Ms.', FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', State: 'Georgia', BirthDate: '1977/11/22', }]; @Injectable() export class Service { getEmployees() { return employees; } }
Vue
<template> <DxAccordion :data-source="employees" /> </template> <script> // ... import { employees } from './data'; export default { components: { DxAccordion }, data() { return { employees } } } </script>
export const employees = [{ ID: 1, Prefix: 'Mr.', FirstName: 'John', LastName: 'Heart', Position: 'CEO', State: 'California', BirthDate: '1964/03/16', }, { ID: 2, Prefix: 'Mrs.', FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', State: 'California', BirthDate: '1981/06/03', }, { ID: 3, Prefix: 'Mr.', FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', State: 'Arkansas', BirthDate: '1974/09/07', }, { ID: 4, Prefix: 'Ms.', FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', State: 'Georgia', BirthDate: '1977/11/22', }];
React
// ... import { employees } from './data'; function App() { return ( <Accordion dataSource={employees} /> ); } export default App;
export const employees = [{ ID: 1, Prefix: 'Mr.', FirstName: 'John', LastName: 'Heart', Position: 'CEO', State: 'California', BirthDate: '1964/03/16', }, { ID: 2, Prefix: 'Mrs.', FirstName: 'Olivia', LastName: 'Peyton', Position: 'Sales Assistant', State: 'California', BirthDate: '1981/06/03', }, { ID: 3, Prefix: 'Mr.', FirstName: 'Robert', LastName: 'Reagan', Position: 'CMO', State: 'Arkansas', BirthDate: '1974/09/07', }, { ID: 4, Prefix: 'Ms.', FirstName: 'Greta', LastName: 'Sims', Position: 'HR Manager', State: 'Georgia', BirthDate: '1977/11/22', }];
Control the Accordion Behavior
If you do not specify additional properties, only one panel can be expanded at a time. To change this behavior, set the collapsible and multiple properties to true. You can also use the animationDuration property to change the duration of the panel expand and collapse animations.
jQuery
$(function() { $("#accordion").dxAccordion({ // ... collapsible: true, multiple: true, animationDuration: 450 }); });
Angular
<dx-accordion ... [collapsible]="true" [multiple]="true" [animationDuration]="450" > </dx-accordion>
Vue
<template> <DxAccordion ... :collapsible="true" :multiple="true" :animation-duration="450" /> </template> <script> // ... </script>
React
// ... function App() { return ( <Accordion ... collapsible={true} multiple={true} animationDuration="450" /> ); } export default App;
Customize Item Appearance
To customize panel appearance, use the itemTemplate for panel content and the itemTitleTemplate for the panel's title.
jQuery
$(function() { $("#accordion").dxAccordion({ // ... itemTitleTemplate: function (data) { return data.FirstName + " " + data.LastName; }, itemTemplate: function (data) { return data.Position + " from " + data.State; } }); });
Angular
<dx-accordion ... itemTemplate="item" itemTitleTemplate="title" > <div *dxTemplate="let data of 'title'"> {{ data.FirstName + " " + data.LastName }} </div> <div *dxTemplate="let data of 'item'"> {{ data.Position + " from " + data.State }} </div> </dx-accordion>
Vue
<template> <DxAccordion ... item-template="item" item-title-template="title" > <template #title="{ data }"> {{ data.FirstName + " " + data.LastName }} </template> <template #item="{ data }"> {{ data.Position + " from " + data.State }} </template> </DxAccordion> </template> <script> // ... </script>
React
// ... const customTitle = (data) => { return data.FirstName + " " + data.LastName; } const customItem = (data) => { return data.Position + " from " + data.State; } function App() { return ( <Accordion ... itemTitleRender={customTitle} itemRender={customItem} /> ); } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.