Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

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 options 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.common.css';
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.common.css';
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