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.

View on GitHub

Create an Accordion

jQuery

Add DevExtreme to your jQuery application and use the following code to create an Accordion:

index.js

index.html

$(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.2.3/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/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:

app.component.html

app.component.ts

app.module.ts

<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:

App.vue

<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:

App.js

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

index.js

index.html

data.js

$(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

app.component.html

app.component.ts

app.service.ts

<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

App.vue

data.js

<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

App.js

data.js

// ...
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

index.js

$(function() {
    $("#accordion").dxAccordion({
        // ...
        collapsible: true,
        multiple: true,
        animationDuration: 450
    });
});

Angular

app.component.html

<dx-accordion ...
    [collapsible]="true"
    [multiple]="true"
    [animationDuration]="450"
>
</dx-accordion>

Vue

App.vue

<template>
    <DxAccordion ...
        :collapsible="true"
        :multiple="true"
        :animation-duration="450"
    /> 
</template>

<script>
// ...
</script>

React

App.js

// ...

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

index.js

$(function() {
    $("#accordion").dxAccordion({
        // ...
        itemTitleTemplate: function (data) {
            return data.FirstName + " " + data.LastName;
        },
        itemTemplate: function (data) {
            return data.Position + " from " + data.State;
        }
    });
});

Angular

app.component.html

<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

App.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

App.js

// ...
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;

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery Accordion - Getting Started

jQuery

Angular

Vue

React

Create an Accordion

jQuery

Angular

Vue

React

Bind Accordion to Data

jQuery

Angular

Vue

React

Control the Accordion Behavior

jQuery

Angular

Vue

React

Customize Item Appearance

jQuery

Angular

Vue

React