We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

One click expand all accordion items


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>

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'; 
        } else { 
            toggleBtn.content = 'Show'; 

Live Chat Icon For mobile
Up arrow icon