Expand my Community achievements bar.

SOLVED

Adaptive Form - Collapse All Accordion Panels

Avatar

Level 7

Hi,

I have a form that is using the out of the box accordion layout on a panel with 5 sub-panels underneath.

When I load the form the first sub-panel is set to active and is opened automatically. This is useful most of the time, however I would like to know if it is possible to collapse all of the panels programatically (or via a setting)?

I have tried using the guidebridge api setFocus to focus on a button at the button of the form when the form initialises, but this did not work (as I think the focus may be handled after the init?).

I am also aware that I can setFocus to another panel (rather than the first panel), but this isn't what I am after.

Can anyone think of another way to collapse all the panels on the accordion when the form is loaded?

Thanks,

Jim

1 Accepted Solution

Avatar

Correct answer by
Level 7

I found that when dynamically creating panels in an Accordion they are all opened automatically (which to me is counter intuitive from a UI perspective). I asked Adobe how to do this exact thing via DayCare and the answer I got was that there is no way currently to do this using the guideBridge API.

You might be able to write some custom Javascript to find the accordion panels and close them as the code is there (look at the click event), its just not exposed publically.

View solution in original post

3 Replies

Avatar

Correct answer by
Level 7

I found that when dynamically creating panels in an Accordion they are all opened automatically (which to me is counter intuitive from a UI perspective). I asked Adobe how to do this exact thing via DayCare and the answer I got was that there is no way currently to do this using the guideBridge API.

You might be able to write some custom Javascript to find the accordion panels and close them as the code is there (look at the click event), its just not exposed publically.

Avatar

Level 7

Hi Darren,

This is the route we went down too. We are just removing the active class when the form is loaded. If we run into problems with this approach we will change it, but it is fine for now:

var collapseAccordion = function (){

  $("div[id$=_guide-item]").removeClass("active");

};

Cheers,

Jim

Avatar

Level 2
Hi! Where did you place this script to get the desired result? In the accordion panel's rules, or somewhere else?