Search results

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>