All docs
V21.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Control the Behavior

By default, exactly one panel can be in the expanded state at one moment. To change this, switch the collapsible and multiple properties to true.

jQuery
JavaScript
$(function () {
    $("#accordionContainer").dxAccordion({
        // ...
        // All panels may be collapsed
        collapsible: true,
        // Multiple panels may be expanded
        multiple: true
    });
});
Angular
HTML
TypeScript
<dx-accordion
    [collapsible]="true" <!-- All panels may be collapsed -->
    [multiple]="true">   <!-- Multiple panels may be expanded -->
</dx-accordion>
import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxAccordionModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxAccordion
        :collapsible="true" <!-- All panels may be collapsed -->
        :multiple="true">   <!-- Multiple panels may be expanded -->
    </DxAccordion>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxAccordion from "devextreme-vue/accordion";

export default {
    components: {
        DxAccordion
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Accordion } from 'devextreme-react/accordion';

class App extends React.Component {
    render() {
        return (
            <Accordion
                collapsible={true} {/* All panels may be collapsed */}
                multiple={true}>   {/* Multiple panels may be expanded */}
            </Accordion>
        );
    }
}

export default App;
See Also