One click expand all accordion items

Thread ID:	Created:	Updated:	Platform:	Replies:
143273	Mar 12,2019 03:59 PM UTC	Mar 13,2019 09:21 AM UTC	ASP.NET MVC - EJ 2	1

Subscribe to this post

Tags: Accordion

Prashanth Singh Rathod

Asked On March 12, 2019 03:59 PM UTC

Hi,

I am looking for a solution where I can create a button and once click on it the all the accordion items should be able to toggle to open all the items and once and close at once I am attaching a sample please do have a look and let me know asap.

<div class="col-12" id="generalAccordion">

@Html.EJS().Accordion("accordion").ExpandMode(ExpandMode.Multiple).Items(Model.Instructions.Select(i =>

new AccordionAccordionItem { Header = i.Text, Expanded = false, Content = $"#instructions-{i.Id.ToString()}" }).ToList()).Render()

@foreach (var currInstruction in Model.Instructions)

{

<div id="@($"instructions-{currInstruction.Id.ToString()}")" style="display: none;">

@foreach (var currGeneralInstruction in currInstruction.GeneralInstructions)

{

<h4 style="font-size: 1.2rem;"><a rel='nofollow' href="@Url.CdnContent("/static/pdf/" + currGeneralInstruction.FileName)" target="_blank"><i class="fa fa-file-pdf-o fa-2x text-danger "></i>@currGeneralInstruction.FileTitle</a></h4>

}

</div>

}

</div>

Reply | Reply with quote

Karthigeyan Krishnamurthi [Syncfusion]

Replied On March 13, 2019 09:21 AM UTC

Hi Prashanth,

Thank you for contacting Syncfusion support.

We have prepared the below sample to open / close all the Accordion items on button click using expandItem function.

http://www.syncfusion.com/downloads/support/forum/143273/ze/sample-1233859304

document.getElementById("togglebtn").addEventListener('click', function () {

var acc = document.querySelector('.e-accordion').ej2_instances[0];

var toggleBtn = document.getElementById("togglebtn").ej2_instances[0];

if (toggleBtn.element.classList.contains('e-active')) {

toggleBtn.content = 'Hide';

acc.expandItem(true);

} else {

toggleBtn.content = 'Show';

acc.expandItem(false);

}

});

Regards,

Karthi

Reply | Reply with quote

CONTACT US

One click expand all accordion items

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US