Can you open multiple Accordion panels at once

[Gary Cryer]

Is it possible to open two or more accordion panels at once. Currently the behavior is such that if I click to open on panel the others will close. I have a need to have a 3 Accordion panel, defaulted to have them all open, and have the ability to expand and collapse independently. If it is possible with the Accordion then how? Or if there is another tool that I should consider then please advise.

Thanks in advance,
Gary Cryer

[Varalakshmi R.S]

Hi Gary,

Thanks for contacting syncfusion forum.

We regret to let you know that accordion does not allow to open all the accordion panels at a same time by default. Any one of the panels can be opened by using the option Active(numericvalue). Could you please let us know your exact requirement so that we would analyze more on this and provide you an efficient solution.

Kindly provide the required details.

Regards,
Varalakshmi

[Whaylon Douglas Coleman]

I also have the same need to be able to expand all the panels at once.  

I require:

1.  The ability to expand all panels.

2.  The ability to collapse all panels.

3.  I would like each panel to have the ability to collapse and expand it independently.

This way in my UI I can simple have two links at the top of the page, {Expand All  or Collapse All}.  "Expand All" references the Javascript method for #1 and "Collapse All" references the Javascript method for #2.  The "Print All" functionality on the page would always call #1 to expand all the panels and print.  My "Print" functionality on the page would just print the current page with whatever panels are already opened.

 

[Varalakshmi R.S]

Hi Whaylon Douglas Coleman,

 

Thanks for sharing the details with us.

 

An accordion doesn't allow more than one content panel to be open at the same time. If you want to open more than a panel, then you must manually customize the styles of Accordion control. Please refer the below given code snippet,

<code>

[Script]

function expandAll() {

        $("#myAccordion").find("h3").each(function (i) {

            //customize header for each panels

            $(this).removeClass("ui-state-default").addClass("ui-state-active");

        });

        $("#myAccordion").find("div").each(function (i) {

            //displays panel content

            $(this).css("display", "block");

        });

 

        $("#myAccordion").find("span").each(function (i) {

            //customize the icon images for expanded panels

            $(this).removeClass("ui-icon-triangle-1-n").addClass("ui-icon-triangle-1-s");

        });

    }

 

    function collapseAll() {

        $("#myAccordion").find("h3").each(function (i) {

            //customize header for each panels

            $(this).removeClass("ui-state-active").addClass("ui-state-default");

        });

        $("#myAccordion").find("div").each(function (i) {

            //hides panel content

            $(this).css("display", "none");

        });

 

        $("#myAccordion").find("span").each(function (i) {

            //customize the icon images for collapsed panels

            $(this).removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e");

        });

    }

 

</code>

 

Kindly try the above specified solution and let us know if it helps.

 

Regards,

Varalakshmi