All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Overview

The Accordion widget contains several panels displayed one under another. These panels can be collapsed or expanded by an end user, which makes this widget very useful for presenting information in a limited amount of space.

View Demo

The following code adds a simple Accordion to your page. Note that each data source object contains the title field, whose value goes to the title of the panel.

jQuery
JavaScript
HTML
var accordionData = [{
    title: "Personal Data",
    firstName: "John",
    lastName: "Smith",
    birthYear: 1986
}, {
    title: "Contacts",
    phone: "(555)555-5555",
    email: "John.Smith@example.com"
}, {
    title: "Address",
    state: "CA",
    city: "San Francisco",
    street: "Stanford Ave"
}];

$(function () {
    $("#accordionContainer").dxAccordion({
        dataSource: accordionData,
        itemTemplate: function (itemData, itemIndex, itemElement) {
            for (var field in itemData) {
                itemElement.append("<p>" + field + ": " + itemData[field] + "</p>");
            }
        }
    });
});
<div id="accordionContainer"></div>
Angular
HTML
TypeScript
<dx-accordion
    [dataSource]="accordionData"
    itemTemplate="item">
    <div *dxTemplate="let itemData of 'item'">
        <p *ngFor="let key of getItemKeys(itemData)">
            {{key}}: {{itemData[key]}}
        </p>
    </div>
</dx-accordion>
import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
    accordionData = [{
        title: "Personal Data",
        firstName: "John",
        lastName: "Smith",
        birthYear: 1986
    }, {
        title: "Contacts",
        phone: "(555)555-5555",
        email: "John.Smith@example.com"
    }, {
        title: "Address",
        state: "CA",
        city: "San Francisco",
        street: "Stanford Ave"
    }];
    getItemKeys (item) {
        return Object.keys(item);
    }
}
@NgModule({
    imports: [
        // ...
        DxAccordionModule
    ],
    // ...
})
See Also