keerthanaRajendran/app.html

## app.html
<template>
    <div>
        <ej-accordion id="multiAccordion" style="width: 500px" e-selected-item-index.bind="2" >
         <template repeat.for="row of graphTree">
                        <h3><a href="#">${row.category}</a></h3>
                        <div>
                            <ul repeat.for="item of row.name">
                                <li>
                                    <h6 class="showHand" click.delegate="showChart(row.id)">${item}</h6>
                                </li>
                            </ul>
                        </div>
                    </template>
        </ej-accordion>
        <br/>
         <button id="btn" ej-button="e-size.bind: largeBtnValue; e-text:Change;" e-on-click.trigger="change($event)"></button>
    </div>
</template>

## app.js
export class MultipleOpenAccordion {
    change(event) {
        let acrdnObj;
        this.acrdnObj = $('#multiAccordion').data('ejAccordion');
       if (this.acrdnObj)
         this.acrdnObj.option({ selectedItemIndex: 1 });
    }
    constructor() {
      this.multipleOpen = true;
     this.graphTree = [
        {id: "1", category: "Div1", name: ["Chart1 - Number of website visitors"]},
        {id: "2", category: "Div2", name: ["Chart2 - Number of signups", "Chart3 - Active Users" ]},
        {id: "3", category: "Div3", name: ["Chart4 - Test"]}
      ];
    }

}

## index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential Studio for JavaScript">
    <meta name="author" content="Syncfusion">
    <title>Untitled</title>
    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/14.2.0.28/js/web/flat-azure/ej.web.all.min.css" />
</head>
<body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-syncfusion-bundles/0.0.1/config2.js"></script>
    <script>
        System.import('aurelia-bootstrapper');
    </script>
</body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-syncfusion-bridge', syncfusion => syncfusion.useAll());

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<div>
	<ej-accordion id="multiAccordion" style="width: 500px" e-selected-item-index.bind="2" >
	<template repeat.for="row of graphTree">
	<h3><a href="#">${row.category}</a></h3>
	<div>
	<ul repeat.for="item of row.name">
	<li>
	<h6 class="showHand" click.delegate="showChart(row.id)">${item}</h6>
	</li>
	</ul>
	</div>
	</template>
	</ej-accordion>
	<br/>
	<button id="btn" ej-button="e-size.bind: largeBtnValue; e-text:Change;" e-on-click.trigger="change($event)"></button>
	</div>
	</template>
	export class MultipleOpenAccordion {
	change(event) {
	let acrdnObj;
	this.acrdnObj = $('#multiAccordion').data('ejAccordion');
	if (this.acrdnObj)
	this.acrdnObj.option({ selectedItemIndex: 1 });
	}
	constructor() {
	this.multipleOpen = true;
	this.graphTree = [
	{id: "1", category: "Div1", name: ["Chart1 - Number of website visitors"]},
	{id: "2", category: "Div2", name: ["Chart2 - Number of signups", "Chart3 - Active Users" ]},
	{id: "3", category: "Div3", name: ["Chart4 - Test"]}
	];
	}

	}
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Essential Studio for JavaScript">
	<meta name="author" content="Syncfusion">
	<title>Untitled</title>
	<!-- Essential Studio for JavaScript theme reference -->
	<link rel="stylesheet" href="https://cdn.syncfusion.com/14.2.0.28/js/web/flat-azure/ej.web.all.min.css" />
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-syncfusion-bundles/0.0.1/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-syncfusion-bridge', syncfusion => syncfusion.useAll());

	aurelia.start().then(a => a.setRoot());
	}