One click expand all accordion items

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>

1 Reply

KK Karthigeyan Krishnamurthi Syncfusion Team 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. 
 
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 


Loader.
Up arrow icon