How-To

Set the nested Accordion

Accordion supports to render nested level of Accordion by using content property. You can give nested Accordion content inside the parent Accordion content property by using id of nested element. The nested Accordion can be rendered with the use of provided events, such as clicked and expanding.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

//Initialize Accordion component
    var nestAcrdn_vid;
    var nestAcrdn_mus;
    var nestAcrdn_musNew;
    var nestAcrdn_img;
    var accordion = new ej.navigations.Accordion({
      expanding: expanding,
      items: [
         { header: 'Video', content: '<div id="nested_video"></div>' },
         { header: 'Music', content: '<div id="nested_music"></div>' },
         { header: 'Images', content: '<div id="nested_images"></div>' },
        ]
    });
//Render initialized Accordion component
    accordion.appendTo('#element');

function clicked(e) {
  var ele = e.originalEvent.target;
  if (ele.querySelectorAll('.e-accordion').length > 0) {
    return;
  }
  nestAcrdn_musNew = new ej.navigations.Accordion({
    items: [
      { header: 'New Track1' },
      { header: 'New Track2' }
    ]
  }, '#nested_musicNew');
}

function expanding(e) {
  if (e.isExpanded && [].indexOf.call(this.items, e.item) === 0) {
    if (e.element.querySelectorAll('.e-accordion').length > 0) {
      return;
    }
  nestAcrdn_vid = new ej.navigations.Accordion({
    items: [
      { header: 'Video Track1' },
      { header: 'Video Track2' }
    ]
  }, '#nested_video');
  }
  if (e.isExpanded && [].indexOf.call(this.items, e.item) === 1) {
    if (e.element.querySelectorAll('.e-accordion').length > 0) {
      return;
    }
    nestAcrdn_mus = new ej.navigations.Accordion({
      clicked: clicked,
      items: [
        { header: 'Music Track1' },
        { header: 'Music Track2' },
        { header: 'Music New', content: '<div id="nested_musicNew"></div>' }
      ]
    }, '#nested_music');
  }
  if (e.isExpanded && [].indexOf.call(this.items, e.item) === 2) {
    if (e.element.querySelectorAll('.e-accordion').length > 0) {
      return;
    }
    nestAcrdn_img =new ej.navigations.Accordion({
      items: [
        { header: 'Track1' },
        { header: 'Track2' },
      ]
    }, '#nested_images');
  }
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Load content through Ajax

Accordion supports to load external contents through AJAX library. Refer the below steps.

  • Import the Ajax module from ej2-base and initialize with URL path.

  • Get data from the Ajax Success event to initialize Accordion with retrieved external path data.

Source
Preview
index.js
index.html
ajax.html
ej.base.enableRipple(true);

    var ajax = new ej.base.Ajax('./ajax.html', 'GET', true);
    ajax.send().then();
    ajax.onSuccess = function (data) {
    var ctn2 = data;
//Initialize Accordion component
    var accordion = new ej.navigations.Accordion({
    items: [
      { header: 'Department', content: '#acrdnContnet1' },
      { header: 'Platform', content: '#acrdnContnet2' },
      { header: 'Employee Details', content: ctn2 },
    ]
    });

//Render initialized Accordion component
    accordion.appendTo('#element');
    }
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
        <div id="acrdnContnet1" style="display:none">
            <ul style="margin : 0px;padding:0px 16px; list-style-type: none">
                <li>Testing</li>
                <li>Development</li>
            </ul>
        </div>
        <div id="acrdnContnet2" style="display:none">
            <ul style="margin : 0px;padding:0px 16px; list-style-type: none">
                <li>Mobile</li>
                <li>Web</li>
            </ul>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
<html><head><script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head><body>&#xFEFF;
<div>
    <div class="comments-list">
        <div class="cont-list">
            <img src="http://js.syncfusion.com/demos/web/content/images/Employee/8.png" alt="contact">
            <br>
            <div>
                <div class="time-panel">1 hr</div>
                <b class="headername">Erik Linden</b></div><br><br> London, one of the most popular tourist 
            destinations in the world for a reason. A cultural and historical hub, London has an excellent public 
            transportation system that allows visitors to see all the fantastic sights without spending a ton 
            of money on a rental car. London contains four World Heritage Sites.
            <div class="comments">
                <div class="c-list">Retweet</div>
                <div class="c-list">Reply</div>
                <div class="c-list">Share</div>
            </div>
        </div>       
    </div>
</div>
&#xFEFF;<style>
    .cont-list img {
        border-radius: 10px;
        float: left;
        height: 56px;
    }
    
    .comments {
        padding: 10px;
        color: #074B92;
        font-weight: 600;
        position: relative;
        top: 6px;
    }
    
    .cont-list {        
        padding-bottom: 9px;
    }
    
    .cont-list:last-child {
        border-bottom: none;
        padding-bottom: 10px;
    }
    
    .time-panel {
        float: right;
        color: #2382C3;
        margin-right: 10px;
        margin-top: 7px;
    }
    
    .headername {
        font-size: 16px;
        font-weight: 600;
        color: #074B92;
        position: relative;
        left: 9px;
    }
    
    .c-list {
        float: right;
        margin-top: -11px;
        padding-right: 12px;
    }
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Set custom animation

Accordion supports custom animations for both expand and collapse actions from the provided animation option of Animation library. The animation property also allows you to set easing, duration, and various other effects of your choice.

Default animation is given as SlideDown for expanding the panel using expand animation property and SlideUp for collapsing the panel using collapse animation property. You can also disable the animation by setting animation effect as none.

The sample demonstrates some types of animation that suits for Accordion. You can check all the animation effects here.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

//Initialize Accordion component

    var accordion = new ej.navigations.Accordion({
    items: [
        { header: 'ASP.NET', expanded: 'true', content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.' },
        { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' },
        { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.' },
    ]
    });

//Render initialized Accordion component
    accordion.appendTo('#element');

    var listObjExpand = new ej.dropdowns.DropDownList({ 
        index: 0,
        placeholder: 'Select a animate type',
        popupHeight: '150px',
        change: () => { valueChange();  }
     });
    listObjExpand.appendTo('#expandAnimation');
    valueChange();
    
    var listObjCollapse = new ej.dropdowns.DropDownList({ 
        index: 1,
        placeholder: 'Select a animate type',
        popupHeight: '150px',
        change: () => { valueChange1();  }
     });
    listObjCollapse.appendTo('#collapseAnimation');
    valueChange1();

    function valueChange() {
      accordion.animation.expand.effect = (listObjExpand.value);
    }
    function valueChange1() {
      accordion.animation.collapse.effect = (listObjCollapse.value);
    }
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="default" style="padding-bottom:75px;">
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <label> Expand Animation </label>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <select id="expandAnimation"> 
    <option value="SlideDown">SlideDown</option>
    <option value="SlideUp">SlideUp</option>
    <option value="FadeIn">FadeIn</option>
    <option value="FadeOut">FadeOut</option>
    <option value="FadeZoomIn">FadeZoomIn</option>
    <option value="FadeZoomOut">FadeZoomOut</option>
    <option value="ZoomIn">ZoomIn</option>
    <option value="ZoomOut">ZoomOut</option>
    <option value="None">None</option>
            </select>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <label> Collapse Animation </label>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <select id="collapseAnimation"> 
    <option value="SlideDown">SlideDown</option>
    <option value="SlideUp">SlideUp</option>
    <option value="FadeIn">FadeIn</option>
    <option value="FadeOut">FadeOut</option>
    <option value="FadeZoomIn">FadeZoomIn</option>
    <option value="FadeZoomOut">FadeZoomOut</option>
    <option value="ZoomIn">ZoomIn</option>
    <option value="ZoomOut">ZoomOut</option>
    <option value="None">None</option>
            </select>
                </div>
            </div>
        </div>
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

To keep single pane open always

By default, all Accordion panels are collapsible. You can customize the Accordion to keep one panel as expanded state always. This is applicable for Single expand mode.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

//Initialize Accordion component

    var clickEle;
    var accordion = new ej.navigations.Accordion({
    expandMode: 'Single',
    clicked: clicked,
    expanding: beforeExpand,
    items: [
        { header: 'ASP.NET', expanded: 'true', content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.' },
        { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' },
        { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.' },
    ]
    });

//Render initialized Accordion component
    accordion.appendTo('#element');

function clicked (e) {
  clickEle = e.originalEvent.target;
}

function beforeExpand (e) {
  var expandCount = this.element.querySelectorAll('.e-selected').length;
  var ele = this.element.querySelectorAll('.e-selected')[0];
  if (ele) {
    ele = ele.firstChild
  }
  if (expandCount === 1 && ele === clickEle) {
    e.cancel = true;
  }
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Create wizard using Accordion

Accordion items can be disabled dynamically by passing the index and boolean value with the enableItem method and also dynamically expand the item using expandItem method.

The below Wizard sample is designed for Online Shopping model. In this, each Accordion item is integrated with required components to fill the details and designed for getting user details and making payment at the end. Each field is provided with validation for all mandatory option to enable/disable to next Accordion. In below sample, accordion items can be disabled dynamically with enableItem method using created event.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

var success = 'Your payment successfully processed';
var email_alert = 'Enter valid email address';
var mobile_alert = 'Mobile number length should be 10';
var card_alert = 'Card number length should be 16';
var cvv_alert = 'CVV number length should be 3';

var mobile = new ej.inputs.NumericTextBox({
  placeholder: 'Mobile',
  floatLabelType: 'Auto',
  format: '0',
  showSpinButton: false
});
mobile.appendTo('#mobile');

var cardNum = new ej.inputs.NumericTextBox({
  placeholder: 'Card No',
  floatLabelType: 'Auto',
  format: '0',
  showSpinButton: false
});
cardNum.appendTo('#cardNo');

var datepicker = new ej.calendars.DatePicker({
  width: '100%',
  readonly: true,
  format: 'MM/yyyy',
  floatLabelType: 'Auto',
  placeholder: 'Expiry Date'
});
datepicker.appendTo('#expiry');

var cvv = new ej.inputs.NumericTextBox({
  placeholder: 'CVV',
  floatLabelType: 'Auto',
  format: '0',
  showSpinButton: false
});
cvv.appendTo('#CVV');

var alertDialog = new ej.popups.Dialog({
  header: 'Alert',
  width: 200,
  isModal: true,
  content: '',
  target: document.body,
  buttons: [{
    buttonModel: { content: 'Ok', isPrimary: true },
    click: (() => {
      alertDialog.hide();
      if (acrdnObj.expandedItems[0] === 2 && alertDialog.content === success) {
        acrdnObj.enableItem(0, true);
        acrdnObj.enableItem(1, false);
        acrdnObj.enableItem(2, false);
        acrdnObj.expandItem(true, 0);
      }
    })
  }]
});
alertDialog.appendTo('#alertDialog');
alertDialog.hide();

var acrdnObj = new ej.navigations.Accordion({
  expanding: expand,
  created: () => {

  },
  items: [
    { header: 'Sign In', content: '#Sign_In_Form', expanded: true },
    { header: 'Delivery Address', content: '#Address_Fill' },
    { header: 'Card Details', content: '#Card_Fill' },
  ]
});
acrdnObj.appendTo('#element');

function checkMail(mail) {
  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
    return (true);
  } else {
    alertDialog.content = email_alert;
    alertDialog.show();
    return (false);
  }
}

function checkMobile(mobile) {
  if (mobile.match(/^\d{10}$/)) {
    return (true);
  } else {
    alertDialog.content = mobile_alert;
    alertDialog.show();
    return (false);
  }
}

function checkCardNo(cardNo) {
  if (cardNo.match(/^\d{16}$/)) {
    return (true);
  } else {
    alertDialog.content = card_alert;
    alertDialog.show();
    return (false);
  }
}

function checkCVV(cvv) {
  if (cvv.match(/^\d{3}$/)) {
    return (true);
  } else {
    alertDialog.content = cvv_alert;
    alertDialog.show();
    return (false);
  }
}

function expand(e) {
  if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 0) {
    document.getElementById('Continue_Btn').onclick = (e) => {
      var email = document.getElementById('email');
      var password = document.getElementById('password');
      if (email.value !== '' && password.value !== '') {
        if (checkMail(email.value)) {
          email.value = password.value = '';
          acrdnObj.enableItem(1, true);
          acrdnObj.enableItem(0, false);
          acrdnObj.expandItem(true, 1);
        }
        document.getElementById('err1').classList.remove('show');
      } else {
        document.getElementById('err1').classList.add('show');
      } 
    };
  } else if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 1) {
    document.getElementById('Continue_BtnAdr').onclick = (e) => {
      var name = document.getElementById('name');
      var address = document.getElementById('address');
      var mobile = document.getElementById('mobile');
      if ((name.value !== '') && (address.value !== '') && (mobile.value !== '')) {
        if (checkMobile(mobile.value)) {
          acrdnObj.enableItem(2, true);
          acrdnObj.enableItem(1, false);
          acrdnObj.expandItem(true, 2);
        }
        document.getElementById('err2').classList.remove('show');
      } else {
        document.getElementById('err2').classList.add('show');
      }
    };
  } else if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 2) {
    document.getElementById('Back_Btn').onclick = (e) => {
      acrdnObj.enableItem(1, true);
      acrdnObj.enableItem(2, false);
      acrdnObj.expandItem(true, 1);
    };
    document.getElementById('Save_Btn').onclick = (e) => {
      var cardHolder = document.getElementById('cardHolder');
      var expiry = document.getElementById('expiry');
      var cardNo = document.getElementById('cardNo');
      var cvv = document.getElementById('CVV');
      if ((cardNo.value !== '') && (cardHolder.value !== '') && (expiry.value !== '') && (cvv.value !== '')) {
        if (checkCardNo(cardNo.value)) {
          if (checkCVV(cvv.value)) {
            alertDialog.content = success;
            alertDialog.show();
          }
        }
        document.getElementById('err3').classList.remove('show');
      } else {
        document.getElementById('err3').classList.add('show');
      }
    };
  }
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="template_title"> Online Shopping Payment Module</div>
        <div id="element"></div>
        <div id="result"></div>
    </div>
    <div id="Sign_In_Form" style="display: none; padding: 3px 0">
        <form id="formId">
            <div class="form-group">
                <div class="e-float-input">
                    <input type="text" id="email" name="Email" required>
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="email">Email</label>
                </div>
                <div class="e-float-input">
                    <input class="e-input" id="password" type="password" name="Password" required>
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="password">Password</label>
                </div>
            </div>
        </form>
        <div style="text-align: center">
            <button class="e-btn" id="Continue_Btn">Continue</button>
            <div id="err1">* Please fill all fields</div>
        </div>
    </div>
    <div id="Address_Fill" style="display: none; padding: 3px 0">
        <form id="formId_Address">
            <div class="form-group">
                <div class="e-float-input">
                    <input type="text" id="name" name="Name" required>
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="name">Name</label>
                </div>
            </div>
            <div class="form-group">
                <div class="e-float-input">
                    <input type="text" id="address" name="Address" required>
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="address">Address</label>
                </div>
            </div>
            <div class="form-group">
              <input type="text" id="mobile">
            </div>
        </form>
        <div style="text-align: center">
            <button class="e-btn" id="Continue_BtnAdr">Continue</button>
            <div id="err2">* Please fill all fields</div>
        </div>
    </div>
    <div id="Card_Fill" style="display: none; padding: 3px 0;">
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <div class="form-group">
                <input type="text" id="cardNo">
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <div class="form-group">
                <div class="e-float-input">
                    <input type="text" id="cardHolder" name="cardHolder" required>
                    <span class="e-float-line"></span>
                    <label class="e-float-text" for="cardHolder">CardHolder Name</label>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <input id="expiry">
        </div>
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <div class="form-group">
              <input type="text" id="CVV">
            </div>
        </div>
        <div style="text-align: center">
            <button class="e-btn" id="Back_Btn">Back</button>
            <button class="e-btn" id="Save_Btn">Save</button>
            <div id="err3">* Please fill all fields</div>
        </div>
    </div>
    <div id="alertDialog"></div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Load accordion with DataSource

You can bind any data object to Accordion items, by mapping it to header and content  property.

In the below demo, Data is fetched from an OData service using DataManager. The result data is formatted as a JSON object with header and content fields, which is set to items property of Accordion.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

var itemsData = [];
var mapping =  { header: 'FirstName', content: 'Notes' };

const SERVICE_URI = 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Employees';

new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataAdaptor})
    .executeQuery(new ej.data.Query().range(1, 4)).then((e) => {

    var result = e.result;

    for(var i = 0; i < result.length; i++) {
        itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] });
    }

    //Initialize Accordion component
    var accordion = new ej.navigations.Accordion({
        items: itemsData
    });

    //Render initialized Accordion component
    accordion.appendTo('#element');
});
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Load accordion items dynamically

Accordion items can be added dynamically by passing the item and index value with the addItem method.

In the following demo, new items are added dynamically when you expand an Accordion header using expanded event.

  • Data is fetched from the data source and it is formatted as a JSON object with header and content fields.

  • Here last index is calculated to append the new Accordion item at the end and the number of items are limited to 10, since the data bound have only 10 items.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

//Initialize Accordion component

    var dbFlag = 0;
    var dynamciAcrdnCount = 2;
    var acrdnObj = new ej.navigations.Accordion({
    expanded: expanded,
        items: [
            { header: 'ASP.NET', content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.' },
            { header: ' ASP.NET Core ', content: ' ASP.NET Core is a free and open-source web framework, and the next generation of ASP.NET, developed by Microsoft and the community. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET Core.' },
            { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' },
        ]
    });

//Render initialized Accordion component
    acrdnObj.appendTo('#Accordion_default');

function expanded(e) {
    //Find the expanded state item in accordion
    var Elementindex = document.getElementsByClassName("e-expand-state e-selected e-active")[0];
    //Check the expand state item and currently selected item index. If it is expanded state add dyanmic items or else does nothing
    if ([].slice.call(e.element.parentElement.children).indexOf(e.element) == [].slice.call(e.element.parentElement.children).indexOf(Elementindex)) {
        var array = accordion;
        for (var i = 0; i < dynamciAcrdnCount; i++) {
            if (dbFlag === array.length) { //checking whether all the items in data source added
                return;
            }
            // Item object and the index argument passed into the additem method to add a new accordion
            acrdnObj.addItem(array[dbFlag], acrdnObj.items.length);
            ++dbFlag;
        }
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="control-section">
            <div class="control_wrapper accordion-control-section">
                <div id="Accordion_default"></div>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Add icon to Accordion header

You can add the icon custom css class to the Accordion header using ‘iconCss’ property and also add css styles to the defined class. The accordion icon element is rendered before the header text in the DOM element.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

//Initialize Accordion component

    var accordion = new ej.navigations.Accordion({
    items: [
            { header: 'Athletics', iconCss: 'e-athletics e-acrdn-icons', content: '#athletics', expanded: true },
            { header: 'Water Games', iconCss: 'e-water-game e-acrdn-icons', content: '#water_games' },
            { header: 'Racing', iconCss: 'e-racing-games e-acrdn-icons', content: '#racing_games' },
            { header: 'Indoor Games', iconCss: 'e-indoor-games e-acrdn-icons', content: '#indoor_games' }
        ]
    });

//Render initialized Accordion component
    accordion.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <div id="athletics" style="display:none">
        <li><span class="e-acrdn-icons e-content-icon marathon"></span> Marathon</li>
        <li><span class="e-acrdn-icons e-content-icon javelin"></span> Javelin Throw</li>
        <li><span class="e-acrdn-icons e-content-icon discus"></span> Discus Throw</li>
        <li><span class="e-acrdn-icons e-content-icon highjump"></span> High Jump</li>
        <li><span class="e-acrdn-icons e-content-icon longjump"></span> Long Jump</li>
    </div>
    <div id="water_games" style="display:none">
        <li><span class="e-acrdn-icons e-content-icon dive"></span> Diving</li>
        <li><span class="e-acrdn-icons e-content-icon swimming"></span> Swimming</li>
        <li><span class="e-acrdn-icons e-content-icon marathan_swim"></span> Marathon Swimming</li>
        <li><span class="e-acrdn-icons e-content-icon sync_swim"></span> Synchronized Swimming</li>
        <li><span class="e-acrdn-icons e-content-icon waterpolo"></span> Water Polo</li>
    </div>
    <div id="racing_games" style="display:none">
        <li><span class="e-acrdn-icons e-content-icon cycle_BMX"></span> Cycling BMX</li>
        <li> <span class="e-acrdn-icons e-content-icon cycle_Mountain"></span> Cycling Mountain Bike</li>
        <li> <span class="e-acrdn-icons e-content-icon cycle"></span> Cycle Racing</li>
        <li> <span class="e-acrdn-icons e-content-icon sailing"></span> Sailing</li>
        <li> <span class="e-acrdn-icons e-content-icon rowing"></span> Rowing</li>
    </div>
    <div id="indoor_games" style="display:none">
        <li><span class="e-acrdn-icons e-content-icon tennis"></span> Table Tennis</li>
        <li> <span class="e-acrdn-icons e-content-icon badminton"></span> Badminton</li>
        <li> <span class="e-acrdn-icons e-content-icon volleyball"></span> Volleyball</li>
        <li> <span class="e-acrdn-icons e-content-icon boxing"></span> Boxing</li>
        <li> <span class="e-acrdn-icons e-content-icon swimming_In"></span> Swimming</li>
    </div>
        <br><br>
        <div id="result"></div>
    </div>


<style>
    @font-face {
        font-family: 'acrdn-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSSYAAAEoAAAAVmNtYXDnn+g2AAAB5AAAAGRnbHlmslgPRQAAAnwAABvMaGVhZA6+wXwAAADQAAAANmhoZWEHfAOBAAAArAAAACRobXR4YcP/xgAAAYAAAABkbG9jYU2IVXoAAAJIAAAANG1heHABLwC3AAABCAAAACBuYW1lNl/OpQAAHkgAAAKFcG9zdBxr6o4AACDQAAABawABAAADUv9qAFoEAP/i//0D6wABAAAAAAAAAAAAAAAAAAAAGQABAAAAAQAAxGQXJ18PPPUACwPoAAAAANXpvlcAAAAA1em+V//iAAAD6wPpAAAACAACAAAAAAAAAAEAAAAZAKsADAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPpAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnFwNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+j/9wPo//AD6AAAA+gAAAPo/+ID6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6P/9A+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAUAAAAAQABAABAADnF///AADnAP//AAAAAQAEAAAAAQACAAMABAAFAAYABwAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAAAAAAFgAqgFGAkACjAL0A0AEGASOBPgFjgZeBrIHiggWCMIJOAoUCpILWgwUDI4NXA3mAAIAAAAAA3sD5wANADcAAAEeARcWNicuAScmJw4BBRc3FxEUDwEOAR8BHgE/ATUfARY7ATI2LwImPQEzMjY3NS4BIyEnNycBxQUnHDNDBwUnGwkJLTf+Qha70geWBQMDMwQMBtZ5HgQLYAgIAStpBc8HCAEBCAf+O5OsFgL/HCkGCEEzHCgGAgEBP+4WutP+3AgFYgQMBk4FAwSMi3KJDAsHxGIFBs0IBz4HCZOsFgAABAAAAAADhwPoAAMAFAAdAC8AADcXNy8BHgEHNzEXBzYWFx4BNwEGFiUOASImNDYyFiUGBwE+ATc+AScuAjEmBw4BAVjxVyMCAwUjgyIKGA4lTyj+rgcDAjkBK0ArK0Ar/gkkCgFfGjEYRaNML1M2NzRekOJY8lg5DxkII4QjAwECBwIGAVInUFQgKytAKyuDMjH+oQYWEizNfkJQJyUCB4cAAAAFAAAAAAPpA+cACwAXACMAWABhAAAlDgEHLgEnPgE3HgElDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEDBg8BDgEfARYPASYGBw4BFx4BNz4BPwE+AS8BJjY/AjYWHwEeATczJy4BIwciLwEuASciNx4BMjY0JiIGAUICSjk4SwEBSzg5SgJ3AUs4OEsCAks4OEv+xwJmTk1nAgJnTU5mhRENfCESEkEGCD9EsTQUARMzsEUaHQF4EwYOPwQEBkwECBAFIw83IpgBASIaSQ0GKRA7IhIGATFJMDBJMcY4SwEBSzg4SwEBS0k5SgICSjk4SwEBSzhOZwICZ05NZwICZwGbBgpeGk4mhQsLU0EXWCZXJ1kaQBlCJJ4aQB5/Bw4FOgIEBQlHHiIBQBoiAQtSHiUBWyQxMUkwMAAEAAAAAAPiA+cAaAB1AJ4AqgAAEyIHDgEHFT4BNx4BMjY3HgEyNjceATI2Nx4BMjY3HgEyNjceARc1LgEnJiM1ByIHFAYHLgE1JiM1ByIHFAYHLgEnJiMnFSIHFAYHLgE1JiMnFSIHFAYHLgE1JiMnFSIHFAYHLgE1JiM1AQYWFxY+ASYnJiMOAQUeAR8BHgEzPgE1FBYXPgE1FBYXPgE3LgEnLgEvAS4BJzc2NycmJw4BEx4BFz4BNy4BJw4BUggEASIiHigLCyk+KQsLKT4pCwsqPSoKCyo9KgsLKT0qCwspHiIjAQQIAQcFJCIjJAQIAQcFJCIjIwEECAEIBCQiIyQECAEIBCQjIiQECAEIBCQjIiQFCAElDTA0NE4fJzMTEylC/t0NfB4LCh0TKikqKikqKSoaJAoMaxMOTCpQMHQFBgYBCS0fECg4ATosLDoBATosLDoBGgYDIwMrARkMDRgYDQ0YGA0NGBgNDRgYDQ0YGA0MGQErAyIEBgEBBgMkAgIkAwYBAQYDJAICIwQGAQEGAyQCAiQDBgEBBgMkAgIkAwYBAQYDJAICJAMGAQGCNFkRDTZnVBAFATGUHII2JgkMAyoDAyoDAyoDAyoDARULDmkNBg8GDA5SBTo2MgEFHzOPAScsOgEBOiwsOgEBOgAAAAMAAAAAA+ID5wALABcAKQAAARY2NxY2Ny4BJxYGAx4BFz4BNy4BJw4BBQclFwUWNjcWNjceATcWNjcBAsgqYQQgUxksRBwCOtABQzIyQwEBQzIyQ/3ADwE6Lv66G2wkI10eGF8oJ1kb/sACgjYaBhUHJwMTHwhNAQYyQwEBQzIyQwEBQzU7SjukSQIuNAwrKhI8OxUgAWsAAv/3AAADEgPnAAwAQQAAAQYWFxY2NzYmJyYOASUGFhcWNjcXAwYfAgcGFB8BFjY/ARcHBhY7ATY/ASc2LwE3FRQWOwEyNjURNCclLgEnJgYCQBYXJylTGRYXJxs6MP28Fis3NmYaYJQDAgNlfAQFRgYMBHECHQEJB18MAykBAgVJQAkGPgcJCP6kFlssIDMDhihUGBYWKChUGA8BHBgpYSEeCSU3/wAGBwZ1jwUMBT0EAQSCArUHCwEM+AQGBlVvdAYJCQYBGQkFySc0AQEYAAL/8AAAAxID5wADACoAACUXJScBJgYXPgEXHgEjLgEHIgYXHgEXJScuAQcmNjceARc3NgInLgEnJgYBI2MBjWb+EA2eCgaHOQMBIAJcQwguOQaTQAFIA2uNAg8KAXt9EGAHGn8BcWIgR9vWtNMCOgOVxgcNVQIaCUkqVU8GdCSbBpU7BwQaAQuoNS8OATyABUsGARAAAAAABAAAAAADtwPnAEwAUACJAJIAABMGJxU2Nz4BFzYXHgEzByYPAQ4BFBYXFjI/AT4BJz8BNhc2FjI3PgEzNhYyNz4BMzYXHgEzNSImJyYHJgYiJy4BIyYGIicmIgYiJgciAQcjPwEvASYHBg8BFSEVMjY3NjcyFhcWMjc2MhceATMyNzYyFxYzMjc2NxY2Nz4BNzUnITcXFjY3Nic3JyUeATI2NCYiBkscGxscDh4OHxsKFw1GJiFMCgkJCRItEVAOBAlfExsfHDc3HA4eDhw3NxwOHg4gGw81EBA1DxsgGzc4Gw4fDh82OBsXQDc3NiAbAgN/GTGhyBAlHSAIOv7oERcLICUSJRAULxghTCILFQsUGCFNIRQYExggJQsTBww1Ezr+lXkMEhsFBAxcF/6NAS9ILy9ILwFzDQFZAQ4HBgEBDQUHShcgVgcVFxYHEhJTDiMTYgkNAQEbDgcFARsOBwUBDQcKWQcHDQEBGg0HBQEaDQ0aGgEBH4asFk4JChMSINcHeQQFDwEHCQkJDw8FBAkPDwkJDwEBBwkEDgszAXwFCRINFhFeE1kkLy9ILy8ABAAAAAAD4gPnAAMABwA8AEkAACUzNSMFMzUjAQcxBxUnJgYPAQYWHwIHBg8BDgEfAR4BPwE2PwEXFh8BFj8BNiYvASYvAQM3PgEvASYjIiUOARceATc+AScuAgMou7v82bq6ApGt15UHCgIPAgcG7z5NBQOABQEEQgQNBX8EBIqLBgafCwYtAwYHkgYEQpmsBgMDHwUJBP49JxYWGFQoKBYWDzE5JJycnALgZHwBJgEGBjwHCwE9aiACA2sEDQVTBQIEZgMCOGAEASICC2MHDAIpAQMxAQhkBAwFNgg3GVMpJxcWGVMpGhwBAAAF/+IAAAPrA+cACAARAC0APwBHAAABDgEiJjQ2MhY3FAYiJjQ2MhYlFTMyFhQGKwEVFAYiJj0BIyImNDY7ATU0NjIWBxYXFjY3Mx4BNzY3NiYnIQ4BARUzNS4BIgYC5QETHhMTHhN0FB0UFB0U/ZBGCg0NCkYNEw5FCg0NCkUOEw3GFyd4vxR3Fb54JxdBe3v94nx7Aec+AREbEQHtDxMTHhQUZQ8UFB4TFBRFDRQNRQoNDQpFDRQNRQoNDfAnFjxjbW1jPBYngsgFBcgBr8PDCw4OAAYAAAAAA+ID5wALABcAIwAvAFQAXQAAAQ4BBy4BJz4BNx4BBQ4BBy4BJz4BNx4BFx4BFz4BNy4BJw4BBR4BFz4BNy4BJw4BAQcGFRQWHwEVHgE3PgE9ATYmLwE3Fx4BOwE2NCcjJzQmJyMiBjceATI2NCYiBgOrAlU+QVMBAVU/QFP9ugJVPkBUAQJVPj5V6AJ1VlhzAgN0VlZ1/bYCc1hYcwICdVZYcwGXqhASD60BIBgQFAIHHGJpNAgRCJMiIoFXGhsDBhxkASxBLCxBLAF2QVMBAVU/QFMCAlNAQVMBAVU/QFMCAlNAWHMCAnVWWHMCAnNYVnMEAnVWWHMCAnMBjp4UGBIeCFqnFhgDAxkRyAIlETRpTwoJAzcEfwIYAgcyISwsQSwsAAAAAAUAAAAAA+ID5wBBAEwAVQCEAI0AADcyFhceARcxMzE+ATc+ATczMTIWFx4BFz4BNz4BMhYXHgEXNSImJy4BJw4BBw4BIiYnLgEnIzUOAQcOASImJy4BJxMGFh8BNycmByIGJR4BMjY0JiIGJQcOAQcGFj8BFwcGDwEjIgYUFhchMjY/AhcWFzM+ATQmJyMvASYxLwEzJyYnIhceATI2NCYiBgESGBETPDAfMTwTDxgPBBMaERQ/NDRAExIZJRoRFEA0FhwSEz0xMT0UER0qHBITOi4HMj8UEx0pHRMTPzMGBw8UziXOCgoOGQM+ASk/Kio/Kf45lQ8YAgIkGn9IeAcEPtUUGhoUAQMNFgZYgFQOEqAUGhoUg24pAQMFAn0OEAbKASo+Kio+KqMQEhUpAgIpFREQARESFSkCAigWEhAQEhUpAmISEhQoAQEnFRISEhIUJgMBAigWEhISEhYpAQHNEyQJUlxSBAEQWyApKT8qKlsdBBgQGyAEGTd4BwqbGigaAQ4MeIBLDAEBGigaAXMiAQIDYgoBGR8qKj8pKQAAAwAAAAADCQPnAAQACQAxAAABFgIHEQMmAj8CNSMVJgADPgEXBzEhHgEXIT4BNyE1PgEXEAInNRY2JwYmNT4BJwYmAZ5bRhwfHFtxBh8fGf6xAwfZghb+qA9gSwGUTWsC/o4Fqmn7HTsqARobJhECKTkDZav+qS0CNf1VMAGh0QlqEHcC/rf+nBNxhwM/XR4mjAh2FoubASkBCQYnCCsEGggCFCMBJwoABgAAAAAD4gPnACQARwBTAF0AfACWAAATBiMVMjYyFjI2MhYyNjIWMjYyFjM1IiYiBiImIgYiJiIGIiYiEwYiJyYnFRYXFjI2MhYyNjIWMjYzMhc1JiMiBiImIgYiJiIFFBYXPgE3LgEnDgElFBYXPgE0JiIGJQUOAR8CBRYXFjI2MhYyNjIWFzI3Azc+ATUuASciJQcOAR8CBxUWFxYyNjIWMzI3Jzc+ATQmIz4cISE5RDpCOUQ5QjlEOkE6RDkhITlEOkE6RDlCOUQ5QjpEARIpEgcHBwcSKSQqJCkkKiQpJBYPDg4PFiQpJCokKSQqAm9BNTJDAQFDMjJD/fYoIh8qKj8qAlP+nhUfDQNc/qUODB1COUQ5QjlEOSEYFsXlGiABJhwE/dfdDRMHAjpHDgwSKSMrJBQPDnuPEBQYEgEWDV0bGxsbGxsbG10bGxsbGxsbAUsICAMCOgIDCBERERERBToFEREREU4zQwICQzMzQwICQ7kgKgEBKkAqKkNBBTAjB6nBBAUNGhoaGgEIAWcrBSQaHSYBbikDHhYEaidQAgUIEREE4RoEFiMYAAAAAwAAAAADCAPnABIATQBbAAATDwIGFh8BFj8DNi8BJiMiEwYxBwYWHwEWNj8BFwMGHwEHBhYfARY2PwE2JyYvATcXMDEXFjY/ATYmLwEmBg8BJyImLwEiMSYjJwY3BhYXFjY3NiYnJiMiBpc9AlQEAwdUCwhhAigECEgFBgkuAUMCBAY5BgwDLCRzBAi1PwMFBlUGDAJqAwUBAlNaLDAFDQSCBQIFMAUMBFE+AQICxAEDA4gJyRQkMDFcFxQkMBgYJT4Ba4oEawYOBCQFCoMDWwsHQgQBpgGXBgwDGQIEBmUD/vwLCKiPBwsDJQMEB+8IBwMCTc0lKAQBBZwFDQQoBAEFYTUBAVcCDAF7MVwXFCQwMVwXCiYAAAMAAAAAA8MD5wBRAFoAcAAANw4BBxUyNjc+ATM2Fx4BMj4CMzYXHgEzFjc+ATM2Fx4BMxY3PgEzNhceATM1IicuASMmBw4BByInLgEjJgcOAQciJy4BIyYHDgEHIicuASIGEx4BMjY0JiIGAQMHBgcDBh4BNj8BJTY3EzYmJy4BBjwOHRAQHAwOHxEhHQ0dIRwcIBAhHQ4dEB8cDh8RIRwOHRAgGw4gECEdDh0QIBsOIBAhHQ4dEB8cDh8QIhwOHRAgGw4gECEdDhwRIBcOICEfggEuQy8vQy4Cf6XyEgq6CQghIwqDAR4SCsMMDBUOHRtsBQcBWQcFBQcBDQUHBwoHAQ0FBwENBQcBDQUHAQ0FBwENBQdZDQUHAQ0FBwENBQcBDQUHAQ0FBwENBQcBDQUHBwGLIS4uQy4uAa3+6ZIJE/69ESMUCRDjsQkTAU8WLAwFAQ4AAAAAAwAAAAAD4gPnACQAMABOAAATBiMVMjYyFjI2MhYyNjIWMjYyFjM1IiYiBiImIgYiJiIGIiYiARQWFz4BNy4BJw4BEwUOAR8CBRYXFjI+ARYyPgEWFzI3Azc+ATUuASc+HCEhOUQ6QjlEOUI5RDlCOUU5ISE5RTlCOUQ5QjlEOUI6RAKCQTUyQwEBQzIyQ0n+nhUfDQNc/qUODB1COUQ5QjlEOSEYFsXlGiABJhwBhA1dGxsbGxsbGxtdGxsbGxsbGwEGM0MCAkMzM0MCAkMBHEEFMCMHqcEDBg0aARsaARsBCAFnKwUkGh0mAQAEAAAAAAONA+cAEABQAGUAkQAAJQcxBgcGHgI/ATY0LwEmIjcHFzcXBxc3FwcXNxcHFzc2JiMuAQcOAQcnNz4BMzYmIyYGBw4BByc3PgEXNiYjJgYVDgEXByc+ATM2JjUmBgcBHgEHDgEHDgEnLgE3PgE3PgE3MhYFDgEHBhcPAicmIg8BBhQfARYyPwE2NC8BPwEWMzI2Nz4BNzYmJy4BIyIGAZMfBAIPBiguECUDA00ECVdDDgkMCwsPCg8NEQsSDJALAgEMJAIiIwMLCBQrAhUEAgshAh8cAwkBEC0CEAICDRcoFgEBCw8vAgEJCQsDATQXEwUFKSJGoDUXEwUFKSIpXi0eNf7NKTIHCiYLCLoFChkJjwkJJAoZCY8JCQXAMjI9OnQyKTIHBx0hHUsqOXbgHQIDDi8qCg4iAwkDVAOVkBAUDREMDgsODgsLCg06Bg4MAQEKJgUMBBoUFRAFCAEMKAgKAh8eARYQBAcBFjACAQwnIgwXAQ0BBAIGF0InKk8hRBgxF0InKk8iKCkBFBIpYjRTPiUWuwUJCY8JGQokCQmPChgKBb8SHTIyKWE0NlwiHRwyAAUAAAAAA+ID6QADAAcACwATAEwAADchNSEnITUhJyE1ISUOAQcXNQYmAQYWFwUeARcFDgEfAR4BPwEVDgEHLgE3PgE3NhYXNzUuAScOAQceARc+ATc1NzMWNxElLgEHIgY3fQEY/ug+ARj+6D4BN/7JA3gEFgKGKzv93zIfBgE7WmAT/uwPDQUDBhkPbgU+LTFAAQEfGCY/GmcDZz1efAMDfF5dfwpBCS8i/ssjOQ8FBwK9Hx8fHx85J0MCCnkIBAJFFjgDriRiK0sFGRANEBAEHworOAEBQjEcMA8WDBMeCAZVBgN9XV19AgJ9XRMdAQ4Bfis7JAICAgAAAAYAAAAAA+ID5wAoAFEAWgBjAHcAiwAAExYXHgMyPgIyHgIyPgI3NjQnDgMiLgIiDgIiLgInBicWFzIeAjI+AjIeAjI+AjM2NCciDgIiLgIiDgIiLgIjBiUeATI2NCYiBgUeATI2NCYiBiUHBh8BFjMyNz4BLwE3NiYnJiMGJQcGHwEWMzI3PgEvATc2JicmIyIBAQsqNSs6XTksNFU0LDpdOSw0KwsLLzorNFU0LDpdOSw0VTQsOS8LAQELKjUrOl05LDRVNCw6XTksNCsLCy86KzRVNCw6XTksNFU0LDkvCwLYAS1DLSxELf31ATBILy9IMAGwUAkKUgwTCgkNBwhHRgcIDQkJFP3lVgoLWAwVCgoOBwhMSwcJDgkJFgG4CwEBEBcSEhcQEBcSEhcQAQEWAQESFxAQFxISFxAQFxIBAWkLARAXEhIXEBAXEhIXEAEWARIXEBAXEhIXEBAXEgF5IS0tQy0tHSMwMEcwMOSVEhKHEQUJHA11gg4cBwUBBJ4TE5ASBQkeDn2KDx0JBAAGAAAAAAOBA+cADwAoAD8AUgBiAHUAAAEGBw4BBx4BMz4BNy4BJwYlBgcGByMiJiMeARc+ATc+ATcmJy4BJw4BExQXHgEXHgEXFhc+ATU0Jy4BJy4BJyIFFBYXNTIWPwEuAScmNz4BNw4BJQYHPgEXHgEXFhcuAScOAScOAhYXPgE3JicmNjc+ATcOAQI6UGkuUSAzcD12wD0ZOR0z/q5HUBcWJxUgCxVNMhdvRk+nNSonLkIOH0pWIRBCLCJBG0IuGRwID0EuJmtBM/4LBggBVEIZERUHDAQCCARGUAHDBQEqVywoUig4Ii7PiAUT+gIPChMnMWgwGQgEAgUEEQdCcwEQMR0MDwMcHwFpWSI0FUx2GAcCAQNBbCoBDxQUXFEcEBUWAhclARFWVQQXFBEjFS43L2o5KywLIxIPFwG+GTEVCAUFAyBEKEtXIjwXP6vGISoIAgUEEQ8VFXygDA1QFQ5XfJ5JCiYhRFAmTygwSxMCJQACAAAAAANUA+cACABOAAATHgEyNjQmIgYlASc+ATUuAScOAR0BIgYHBhQfARYyPwI2PwEWHwEWHwEOAQcRHgEyNjc1NwEeATc+AS8BNzYmLwEmLwI3NjQnLgEjInsBNlE2NlE2AZf+kCkMDwEbFhIaDBQHDw9tESkQBgMEBUwJEjUBBT4JIgIBGigaARcBAA0iDxQCEfQMHwckgQcIDgaqEBAHEwkSAz8pNjZRNzdx/o4nBhYQFB0BARYQBgYJECkRbQ8PCQMBBU0SETMEBUYRPAb+7RQaHhX7JP8ADQQKDzAS8wwjWCF4BwUJA60QJw8HCAAAB//9AAAD6APnABYAJQAzAEIAUQB2AIIAADcGBw4BBxUFLgEnLgUnLgEjJgYBMhceAQcOAScuATc+ATcHBhYXFjY3NiYnJiMOASUWFx4BBw4BJy4BNz4BNycOAQcGFhcWNjc2JicmIyUHBgcGFh8BBwYeATY/AT4BLwE3Fx4BHwEWNi8CNCYvASYiBjcGHgE+ASYnJiMiBpY3PQwUAQPfCLFGP0YBJkNCHxg7Ix9DAlkPDz4/DQ9mPT4/DQ1OM8URWFRXiRURWFQXF0du/oAPDj1ADBBlPT8+DA1PMgNHaRERVlVXihURWVMXFwFGvRMGBAoMiiUEEiUdBS4CAhdQdyAFDgiIIAwfeTMSGAMDDxNVBiA9Mg4gHgcIGirKIBMDBwN8BgVEBAImBBcQGQ8LEQEQARMDEGQ/Pj8NEGU9NT4BaFaKFRFYVFeJFQUBVqABAw9kPz4/DBBlPTU+AjgDVUhUihcRWFRWihUF3XgPFxMhCnukExwJEhPOASQVRUtTCw0BHwQzCxuOAh0HAQEEIR4zDiA9MwgBHwAAAAwAAAAAA8MD5wADAAcACwAPABMAFwAbAB8AIwAnAEoAVwAAJTM1IwczNSMHMzUjBzM1IwczNSMHMzUjBTM1IwUzNSMFMzUjBTM1IwEHBhYXFhcWMyUXFj4BJi8BBzcXNRU3PgEuAQ8BLwEmIyYGNwYWFxY2NzYmJyYOAQNIHx9eHx/ZHx9dHx/aICBdHx8DCT4+/ug+Pv7KPj7+yT4+ARiBGRktGxwJCAFnpR0zFBoc3r1DZKcbIAMkGoPdBBMTGSt9FhcnKVMZFhcnGzowJD8/Pz9BQUFBQUFBQZycnJycnJwCJN4vXxwPAQEZOAkZOjMLSw11HwEBCgIlNCEBB0MBCAEYtilTGRYXJylTGQ8CGwAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEADwABAAEAAAAAAAIABwAQAAEAAAAAAAMADwAXAAEAAAAAAAQADwAmAAEAAAAAAAUACwA1AAEAAAAAAAYADwBAAAEAAAAAAAoALABPAAEAAAAAAAsAEgB7AAMAAQQJAAAAAgCNAAMAAQQJAAEAHgCPAAMAAQQJAAIADgCtAAMAAQQJAAMAHgC7AAMAAQQJAAQAHgDZAAMAAQQJAAUAFgD3AAMAAQQJAAYAHgENAAMAAQQJAAoAWAErAAMAAQQJAAsAJAGDIEFjY29yZGlvbl9JY29uc1JlZ3VsYXJBY2NvcmRpb25fSWNvbnNBY2NvcmRpb25fSWNvbnNWZXJzaW9uIDEuMEFjY29yZGlvbl9JY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQQBjAGMAbwByAGQAaQBvAG4AXwBJAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgBBAGMAYwBvAHIAZABpAG8AbgBfAEkAYwBvAG4AcwBBAGMAYwBvAHIAZABpAG8AbgBfAEkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQQBjAGMAbwByAGQAaQBvAG4AXwBJAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGQECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaAA1KYXZlbGluX1Rocm93DFRhYmxlX1Rlbm5pcwtDeWNsaW5nX0JNWApXYXRlcl9Qb2xvCFN3aW1taW5nDERpc2N1c19UaHJvdwZCb3hpbmcGUm93aW5nCUhpZ2hfSnVtcAxJbmRvb3JfR2FtZXMKQ3ljbGVfUmFjZQtXYXRlcl9HYW1lcwdTYWlsaW5nEU1hcmF0aG9uX1N3aW1taW5nCE1hcmF0aG9uBkRpdmluZwlTd2ltbWluZzEJQmFkbWludG9uBlJhY2luZxVTeW5jaHJvbml6ZWRfU3dpbW1pbmcLVm9sbGV5X0JhbGwJQXRobGV0aWNzFEN5Y2xpbmdfTW91bnRhaW5CaWtlCUxvbmdfSnVtcAAAAA==) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-acrdn-icons {
        font-family: 'acrdn-icons';
        font-size: 16px;
    }

    .cycle_BMX::before {
        content: "\e702"
    }

    .javelin::before {
        content: "\e700";
    }

    .marathon::before {
        content: "\e70e";
    }

    .tennis::before {
        content: "\e701";
    }

    .waterpolo::before {
        content: "\e703";
    }

    .swimming::before {
        content: "\e704";
        position: relative;
        top: 5px;
    }

    .discus::before {
        content: "\e705";
    }

    .boxing::before {
        content: "\e706";
    }

    .rowing::before {
        content: "\e707";
    }

    .highjump::before {
        content: "\e708";
    }

    .cycle::before {
        content: "\e70a";
    }

    .sailing::before {
        content: "\e70c";
    }

    .marathan_swim::before {
        content: "\e70d";
    }

    .boxing::before {
        content: "\e706";
    }

    .dive::before {
        content: "\e70f";
    }

    .swimming_In::before {
        content: "\e710";
        position: relative;
        top: 2px;
    }

    .badminton::before {
        content: "\e711";
    }

    .sync_swim::before {
        content: "\e713";
        position: relative;
        top: 3px;
    }

    .volleyball::before {
        content: "\e714";
    }

    .cycle_Mountain::before {
        content: "\e716";
    }

    .longjump::before {
        content: "\e717";
    }

    .e-athletics::before {
        content: "\e715";
    }

    .e-water-game::before {
        content: "\e70b";
    }

    .e-racing-games::before {
        content: "\e712";
    }

    .e-indoor-games::before {
        content: "\e709";
    }

    .e-acrdn-icons:not(.e-icons) {
        padding: 0 16px 0 0;
        vertical-align: middle;
    }

    #athletics li,
    #racing_games li,
    #water_games li,
    #indoor_games li {
        line-height: 36px;
        list-style-type: none;
        text-indent: 16px;
    }

    .accordion-control-section {
        margin: 0 10% 0 10%;
    }

    @media screen and (max-width: 768px) {
        .accordion-control-section {
            margin: 0;
        }
    }
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Integrate Essential JS 2 TreeView inside the Accordion

Accordion supports to render other Essential JS 2 Components by using content property. You can give content as an element string like below, for initializing the component.

content: '<div id="element"> </div>'

The other component can be rendered with the use of provided events, such as clicked and expanding. The following procedure is to render a TreeView within the Accordion,

  • Import the TreeView module from ej2-navigations, for adding TreeView. Please refer the TreeView initialization steps

  • You can initialize the TreeView component in expanding event, by getting the element and defining the required TreeView properties.

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

  var DocDB = [
    {
            nodeId: '03', nodeText: 'Documents', icon: 'folder',
            nodeChild: [
                { nodeId: '03-01', nodeText: 'Environment Pollution.docx', icon: 'docx' },
                { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx', icon: 'docx' },
                { nodeId: '03-03', nodeText: 'Global Warming.ppt', icon: 'ppt' },
                { nodeId: '03-04', nodeText: 'Social Network.pdf', icon: 'pdf' },
                { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf', icon: 'pdf' },
            ]
        },
    ]
    
  var DownloadDB = [
        {
            nodeId: '05', nodeText: 'Downloads', icon: 'folder',
            nodeChild: [
                { nodeId: '05-01', nodeText: 'UI-Guide.pdf', icon: 'pdf' },
                { nodeId: '05-02', nodeText: 'Tutorials.zip', icon: 'zip' },
                { nodeId: '05-03', nodeText: 'Game.exe', icon: 'exe' },
                { nodeId: '05-04', nodeText: 'TypeScript.7z', icon: 'zip' },
            ]
        }
    ]
    
  var PicDB = [
        {
            nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true,
            nodeChild: [
                {
                    nodeId: '04-01', nodeText: 'Camera Roll', icon: 'folder', expanded: true,
                    nodeChild: [
                        { nodeId: '04-01-01', nodeText: 'WIN_20160726_094117.JPG', image: 'http://npmci.syncfusion.com/development/demos/src/images/employees/9.png' },
                        { nodeId: '04-01-02', nodeText: 'WIN_20160726_094118.JPG', image: 'http://npmci.syncfusion.com/development/demos/src/images/employees/3.png' },
                    ]
                },
                { nodeId: '04-02', nodeText: 'Wind.jpg', icon: 'images' },
                { nodeId: '04-03', nodeText: 'Stone.jpg', icon: 'images' },
            ]
        }
    ]


//Initialize Accordion component

    var accordion = new ej.navigations.Accordion({    
    expanding: expand,
    width: 400,
       items : [
           { header: 'Documents', expanded: true, content: '<div id="treeDoc"></div>' },
           { header: 'Downloads', content : '<div id="treeDownload"></div>' },
           { header: 'Pictures', content: '<div id="treePic"></div>' },
       ]
    });

//Render initialized Accordion component
    accordion.appendTo('#element');

    function expand(e) {
  if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 0 && e.element.querySelector('#treeDoc').childElementCount === 0) {
        let treeObj = new ej.navigations.TreeView({
        fields: { dataSource: DocDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
        sortOrder: 'Ascending'
    });
    treeObj.appendTo('#treeDoc');
  }
    if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 1 && e.element.querySelector('#treeDownload').childElementCount === 0) {
        let treeObj = new ej.navigations.TreeView({
        fields: { dataSource: DownloadDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
        sortOrder: 'Ascending'
    });
    treeObj.appendTo('#treeDownload');
  }
  
      if (e.name === 'expanding' && [].indexOf.call(this.items, e.item) === 2 && e.element.querySelector('#treePic').childElementCount === 0) {
        let treeObj = new ej.navigations.TreeView({
        fields: { dataSource: PicDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
        sortOrder: 'Ascending'
    });
    treeObj.appendTo('#treePic');
  }
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>