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.

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>
See Also