$(() => {
DevExpress.setTemplateEngine({
compile: (element) => $(element).html(),
render: (template, data) => Mustache.render(template, data),
});
const tagBox = $('#tagbox').dxTagBox({
dataSource: accordionItems,
displayExpr: 'CompanyName',
disabled: true,
value: [accordionItems[0]],
inputAttr: { 'aria-label': 'Company Name' },
onValueChanged(e) {
accordion.option('selectedItems', e.value);
},
}).dxTagBox('instance');
const accordion = $('#accordion-container').dxAccordion({
dataSource: accordionItems,
animationDuration: 300,
collapsible: false,
multiple: false,
selectedItems: [accordionItems[0]],
itemTitleTemplate: $('#title'),
itemTemplate: $('#customer'),
onSelectionChanged(e) {
tagBox.option('value', e.component.option('selectedItems'));
},
}).dxAccordion('instance');
$('#slider').dxSlider({
min: 0,
max: 1000,
value: 300,
label: { visible: true },
tooltip: {
enabled: true,
position: 'bottom',
},
onValueChanged(e) {
accordion.option('animationDuration', e.value);
},
});
$('#multiple-enabled').dxCheckBox({
text: 'Multiple enabled',
onValueChanged(e) {
accordion.option('multiple', e.value);
tagBox.option('disabled', !e.value);
tagBox.option('value', accordion.option('selectedItems'));
},
});
$('#collapsible-enabled').dxCheckBox({
text: 'Collapsible enabled',
onValueChanged(e) {
accordion.option('collapsible', e.value);
},
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<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=5.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/24.1.7/css/dx.light.css" />
<script src="js/dx.all.js"></script>
<script src="https://unpkg.com/mustache@4.2.0/mustache.min.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">
<div id="accordion">
<div id="accordion-container"> </div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div id="multiple-enabled"></div>
</div>
<div class="option">
<div id="collapsible-enabled"></div>
</div>
<div class="option">
<span>Animation duration</span>
<div id="slider"></div>
</div>
<div class="option">
<span class="caption">Selected Items</span>
<div id="tagbox"></div>
</div>
</div>
</div>
<script type="text/html" id="title">
<div class="header">{{ CompanyName }}</div>
</script>
<script type="text/html" id="customer">
<div class="accodion-item">
<div>
<p>
<b>{{ City }}</b>
(<span>{{ State }}</span>)
</p>
<p>
<span>{{ Zipcode }}</span>
<span>{{ Address }}</span>
</p>
</div>
<div>
<p> Phone: <b>{{ Phone }}</b> </p>
<p> Fax: <b>{{ Fax }}</b> </p>
<p>
Website:
<a href="{{ Website }}" target="_blank"> {{ Website }} </a>
</p>
</div>
</div>
</script>
</div>
</body>
</html>
#accordion {
height: 700px;
}
#accordion .header {
font-size: 20px;
}
#accordion .header,
#accordion p {
margin: 0;
}
#accordion-container {
margin-right: 400px;
}
.dx-theme-material #accordion .dx-accordion-item-title {
display: flex;
}
.dx-theme-material #accordion .header {
align-self: center;
}
.options {
padding: 20px;
position: absolute;
bottom: 0;
right: 0;
width: 340px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
}
.options > .caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
}
.option > .caption {
margin-top: 10px;
display: inline-block;
}
.option > .dx-tagbox {
margin-top: 2px;
}
const 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.dx',
}, {
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.dx',
}, {
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.dx',
}, {
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.dx',
}];