Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Accordion

Accordion

Documentation

The Accordion widget contains several panels displayed one under another. These panels can be collapsed or expanded by a user, which makes this widget very useful for presenting information in a limited amount of space.

Copy to CodeSandBox
Apply
Reset
<template> <div id="accordion"> <DxAccordion :data-source="companies" :collapsible="collapsible" :multiple="multiple" :animation-duration="animationDuration" v-model:selected-items="selectedItems" > <template #title="{ data }"> <CustomTitle :item-data="data"/> </template> <template #item="{ data }"> <CustomItem :item-data="data"/> </template> </DxAccordion> <div class="selected-data"> <span class="caption">Selected Items</span> <DxTagBox :data-source="companies" v-model:value="selectedItems" :disabled="!multiple" display-expr="CompanyName" /> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <DxCheckBox v-model:value="multiple" text="Multiple enabled" /> </div> <div class="option"> <DxCheckBox v-model:value="collapsible" text="Collapsible enabled" /> </div> <div class="option"> <span>Animation duration</span> <DxSlider :min="0" :max="1000" v-model:value="animationDuration" > <DxTooltip :enabled="true" position="bottom" /> <DxLabel :visible="true"/> </DxSlider> </div> </div> </div> </template> <script> import DxAccordion from 'devextreme-vue/accordion'; import DxTagBox from 'devextreme-vue/tag-box'; import DxCheckBox from 'devextreme-vue/check-box'; import DxSlider, { DxTooltip, DxLabel } from 'devextreme-vue/slider'; import CustomTitle from './CustomTitle.vue'; import CustomItem from './CustomItem.vue'; import service from './data.js'; export default { components: { DxAccordion, DxTagBox, DxCheckBox, DxSlider, DxTooltip, DxLabel, CustomTitle, CustomItem }, data() { const companies = service.getCompanies(); return { companies, selectedItems: [companies[0]], multiple: false, collapsible: false, animationDuration: 300 }; } }; </script> <style scoped> #accordion h1 { font-size: 20px; } #accordion h1, #accordion p { margin: 0; } .dx-theme-material #accordion .dx-accordion-item-opened .dx-accordion-item-title { display: flex; } .dx-theme-material #accordion .dx-accordion-item-opened h1 { align-self: center; } .options, .selected-data { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .selected-data { position: relative; height: 36px; } .selected-data > .caption { position: relative; top: 5px; margin-right: 10px; font-weight: bold; font-size: 115%; } .selected-data > .dx-widget { position: absolute; left: 140px; right: 20px; top: 20px; } .options > .caption { font-weight: 500; font-size: 18px; } .option { margin-top: 10px; } </style>
<template> <div> <div> <p> <b>{{ itemData.City }}</b> (<span>{{ itemData.State }}</span>) </p> <p> <span>{{ itemData.Zipcode }}</span> <span>{{ itemData.Address }}</span> </p> </div> <div> <p> Phone: <b>{{ itemData.Phone }}</b> </p> <p> Fax: <b>{{ itemData.Fax }}</b> </p> <p> Website: <a :href="itemData.Website" target="_blank" > {{ itemData.Website }} </a> </p> </div> </div> </template> <script> export default { props: { itemData: { type: Object, default: () => {} } } }; </script>
<template> <h1>{{ itemData.CompanyName }}</h1> </template> <script> export default { props: { itemData: { type: Object, default: () => {} } } }; </script>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
const companies = [{ 'ID': 1, 'CompanyName': 'Super Mart of the West', 'Address': '702 SW 8th Street', 'City': 'Bentonville', 'State': 'Arkansas', 'Zipcode': 72716, 'Phone': '(800) 555-2797', 'Fax': '(800) 555-2171', 'Website': 'http://www.nowebsitesupermart.com' }, { 'ID': 2, 'CompanyName': 'Electronics Depot', 'Address': '2455 Paces Ferry Road NW', 'City': 'Atlanta', 'State': 'Georgia', 'Zipcode': 30339, 'Phone': '(800) 595-3232', 'Fax': '(800) 595-3231', 'Website': 'http://www.nowebsitedepot.com' }, { 'ID': 3, 'CompanyName': 'K&S Music', 'Address': '1000 Nicllet Mall', 'City': 'Minneapolis', 'State': 'Minnesota', 'Zipcode': 55403, 'Phone': '(612) 304-6073', 'Fax': '(612) 304-6074', 'Website': 'http://www.nowebsitemusic.com' }, { 'ID': 4, 'CompanyName': "Tom's Club", 'Address': '999 Lake Drive', 'City': 'Issaquah', 'State': 'Washington', 'Zipcode': 98027, 'Phone': '(800) 955-2292', 'Fax': '(800) 955-2293', 'Website': 'http://www.nowebsitetomsclub.com' }]; export default { getCompanies() { return companies; } };
System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.4', 'devextreme-vue': 'npm:devextreme-vue@20.2.4', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.8/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.7/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });