JavaScript/jQuery Accordion - Customize Item Appearance

For a minor customization of Accordion panels, you can define specific fields in panel data objects. For example, the following code generates three panels, the first and third are not customized, the second is disabled.

JavaScript
HTML
  • var accordionData = [{
  • title: "Employee",
  • text: "John Smith"
  • }, {
  • title: "Phone Number",
  • text: "(555)555-5555",
  • disabled: true
  • }, {
  • title: "Position",
  • text: "Network Administrator"
  • }];
  •  
  • $(function () {
  • $("#accordionContainer").dxAccordion({
  • dataSource: accordionData
  • });
  • });
  • <div id="accordionContainer"></div>

If you need a more flexible solution, define an itemTemplate and itemTitleTemplate:

JavaScript
HTML
  • var accordionData = [{
  • firstName: "John", lastName: "Smith",
  • birthDate: "1986/03/14",
  • position: "Network Administrator"
  • }, {
  • firstName: "Samantha", lastName: "Jones",
  • birthDate: "1972/11/13",
  • position: "Technical Writer"
  • }];
  •  
  • $(function () {
  • $("#accordionContainer").dxAccordion({
  • dataSource: accordionData,
  • itemTemplate: function (itemData, itemIndex, itemElement) {
  • itemElement.append("<p>" + itemData.birthDate + "&nbsp;</p>");
  • itemElement.append("<p>" + itemData.position + "</p>");
  • },
  • itemTitleTemplate: function (itemData, itemIndex, itemElement) {
  • itemElement.append("<span>" + itemData.firstName + "&nbsp;</span> ");
  • itemElement.append("<span>" + itemData.lastName + "</span>");
  • }
  • });
  • });
  • <div id="accordionContainer"></div>

View Demo

You can also customize individual items. Declare the items as scripts and reference them in the template property or assign a customization function straight to this property:

HTML
JavaScript
  • <div id="accordionContainer"></div>
  • <script id="individualTemplate" type="text/html">
  • <span>Technical Writer</span>
  • </script>
  • $(function() {
  • $("#accordionContainer").dxAccordion({
  • items: [{
  • title: "John Smith",
  • template: function() {
  • return $("<span>").text("Network Administrator");
  • }
  • }, {
  • title: "Samantha Jones",
  • template: $("#individualTemplate")
  • }]
  • });
  • });
See Also