DevExtreme Vue - 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