Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.animationDuration = 300;
$scope.collapsible = false;
$scope.multiple = false;
$scope.selectedItems = [accordionItems[0]];
$scope.accordionOptions = {
dataSource: accordionItems,
itemTemplate: "customer",
bindingOptions: {
animationDuration: "animationDuration",
collapsible: "collapsible",
multiple: "multiple",
selectedItems: "selectedItems"
}
};
$scope.tagBoxOptions = {
dataSource: accordionItems,
displayExpr: "CompanyName",
bindingOptions: {
value: "selectedItems",
disabled: "!multiple"
}
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<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://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="accordion">
<div dx-accordion="accordionOptions" dx-item-alias="company">
<div data-options="dxTemplate : { name: 'title' } ">
<h1>{{company.CompanyName}}</h1>
</div>
<div data-options="dxTemplate : { name: 'customer' } ">
<div class="accodion-item">
<div>
<p>
<b>{{company.City}}</b>
(<span>{{company.State}}</span>)
</p>
<p>
<span>{{company.Zipcode}}</span>
<span>{{company.Address}}</span>
</p>
</div>
<div>
<p>
Phone: <b>{{company.Phone}}</b>
</p>
<p>
Fax: <b>{{company.Fax}}</b>
</p>
<p>
Website:
<a ng-href="{{company.Website}}"
target="_blank">
{{company.Website}}
</a>
</p>
</div>
</div>
</div>
</div>
<div class="selected-data">
<span class="caption">Selected Items</span>
<div dx-tag-box="tagBoxOptions"></div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div dx-check-box="{
text: 'Multiple enabled',
bindingOptions: {
value: 'multiple'
}
}"></div>
</div>
<div class="option">
<div dx-check-box="{
text: 'Collapsible enabled',
bindingOptions: {
value: 'collapsible'
}
}"></div>
</div>
<div class="option">
<span>Animation duration</span>
<div dx-slider="{
min:0,
max:1000,
label: { visible: true},
tooltip: {
enabled: true,
position: 'bottom'
},
bindingOptions: {
value: 'animationDuration'
}
}"></div>
</div>
</div>
</div>
</div>
</body>
</html>
#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;
}
var accordionItems = [{
"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"
}];