One click expand all accordion items

[Prashanth Singh Rathod]

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>

[Karthigeyan Krishnamurthi]

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