Question
6
Replies
118
Views
Posted: June 24, 2020
Last activity: June 24, 2020
Solved
How to collapse acordian in 8 version
By default one accordian is always expanded, is there any way to collapse one of the accordian and expand other in Pega 8 version, PFA
***Edited by Moderator: Pallavi to update platform capability tags***
Hi Sam, I don't think we can do that from layout configuration up to my knowledge but adding custom JS code will work for us in this scenario.
HTML Accordion usually works by adding an "active" class to the first div element by default. The div element with "active" class is expanded. Here is the Pega DOM picture.
In above snip, As active class is added to data-lg-child-id='1' div, the first layout inside the Layout group will be open by default.
We can add JS code to add or remove the "active" class to make accordion work for us.
Here is the JQuery snippet. Create a new non auto-generated HTML Section. Insert the below code. Add this section directly below the Layout group so that it wont affect other OOTB accordion.
Update data-lg-child-id='2' with the layout you want to open by default. Here I want to open Layout 2 instead of Layout 1 inside the layout group. So I mentioned in 2 in Line 2.
Line 3 is used to remove the "active" class in layout 1.
I tested this in Pega 8.4. I was working fine. Let us know if you face any issues.