PeopleSoft Fluid Accordion: Default to Open State

The Fluid Accordion is fantastic for organizing information. My favorite place to use it is in the left sidebar (Side Page 1, Master/Detail, and PSL_TWOPANEL). But it has one interesting quirk: it defaults to closed. Wouldn't it be nice to have PeopleSoft default one of the accordion headings to expanded? We haven't found a property or delivered approach, but we do have a workaround. Check out the 10-minute video below for details. Here is our solution in a nutshell:

1. Add a custom style class to the accordion heading group box you want to be expanded (we named ours jsm_expanded). This CSS style class acts as an identifier or selector.
2. Add JavaScript to locate the selector and invoke the click action of the chosen heading.

Here is what that JavaScript would look like:

document.querySelector('.jsm_expanded .ps-link').click();

You can use this JavaScript as-is with the AddOnloadScript PeopleCode function but as the video demonstrates, Master/Detail requires a slightly different approach.

I love the flexibility of Fluid. It is so much easier to inject JavaScript and CSS into Fluid. Are you interested in learning more? We cover the Accordion and related challenges and workarounds in our Fluid 2 course. Be sure to check out the details and register for our next offering.

Did enjoy this PeopleTools Sound Byte? There is more where that came from! Check us out on YouTube and be sure to subscribe for more content!