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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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>

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. 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;