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.
@using Syncfusion.EJ2.Navigations;
<div style="display: none">
<ejs-accordion id="childNested1">
<e-accordion-accordionitems>
<e-accordion-accordionitem header="Video-1"></e-accordion-accordionitem>
<e-accordion-accordionitem header="Video-2"></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
</div>
<div style="display: none">
<ejs-accordion id="childNested2">
<e-accordion-accordionitems>
<e-accordion-accordionitem header="Music-1"></e-accordion-accordionitem>
<e-accordion-accordionitem header="Music-2"></e-accordion-accordionitem>
<e-accordion-accordionitem header="New Playlist" expanded="true" content="#childNested4"></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
</div>
<div style="display: none">
<ejs-accordion id="childNested3">
<e-accordion-accordionitems>
<e-accordion-accordionitem header="Image-1"></e-accordion-accordionitem>
<e-accordion-accordionitem header="Image-2"></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
</div>
<div style="display: none">
<ejs-accordion id="childNested4">
<e-accordion-accordionitems>
<e-accordion-accordionitem header="New Track-1"></e-accordion-accordionitem>
<e-accordion-accordionitem header="New Track-2"></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
</div>
<ejs-accordion id="ParentNested" width="50%" expandMode="Multiple">
<e-accordion-accordionitems>
<e-accordion-accordionitem header="Videos" expanded="true" content='#childNested1'></e-accordion-accordionitem>
<e-accordion-accordionitem header="Music" expanded="true" content='#childNested2'></e-accordion-accordionitem>
<e-accordion-accordionitem header="Images" expanded="true" content='#childNested3'></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
public ActionResult Index()
{
return View();
}
Output be like the below.
Accordion supports to load external contents through AJAX
library. Refer the below steps.
Ajax
module from ej2-base
and initialize with URL path.<div id="element"></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>
<script>
var ajax = new ej.base.Ajax('../accordion/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');
}
</script>
<style>
.accordion-control-section {
margin: 0 10% 0 10%;
}
@@media screen and (max-width: 768px) {
.accordion-control-section {
margin: 0;
}
}
</style>
public ActionResult Index()
{
return View();
}
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.
@using Syncfusion.EJ2.Navigations
<ejs-accordion id="defaultAccordion" clicked="clicked" expanding="beforeExpand">
<e-accordion-accordionitems>
<e-accordion-accordionitem expanded='true' 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.'></e-accordion-accordionitem>
<e-accordion-accordionitem 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.'></e-accordion-accordionitem>
<e-accordion-accordionitem 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.'></e-accordion-accordionitem>
</e-accordion-accordionitems>
</ejs-accordion>
<script type="text/javascript">
var clickEle;
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];
var tglIcon = ele;
if (ele) {
ele = ele.firstChild;
tglIcon = ele.querySelector('.e-tgl-collapse-icon');
}
if (expandCount === 1 && (ele === clickEle || tglIcon === clickEle)) {
e.cancel = true;
}
}
</script>
public ActionResult Index()
{
return View();
}
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.
<div id='element'></div>
<script>
var itemsData = [];
var mapping = { header: 'FirstName', content: 'Notes' };
const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';
new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
.executeQuery(new ej.data.Query().range(4, 7)).then(function (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');
});
</script>
<style>
.accordion-control-section {
margin: 0 10% 0 10%;
}
@@media screen and (max-width: 768px) {
.accordion-control-section {
margin: 0;
}
}
</style>
public ActionResult Index()
{
return View();
}