jQuery Accordion - 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
Feedback