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

Can you open multiple Accordion panels at once

Thread ID:

Created:

Updated:

Platform:

Replies:

101880 Nov 30,2011 12:37 AM UTC Mar 12,2013 05:59 AM UTC ASP.NET MVC (Classic) 3
loading
Tags: Tools
Gary Cryer
Asked On November 30, 2011 12:37 AM UTC

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 [Syncfusion]
Replied On December 1, 2011 11:29 AM UTC

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
Replied On March 7, 2013 06:53 PM UTC

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 [Syncfusion]
Replied On March 12, 2013 05:59 AM UTC

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


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.

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

;