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***
Accepted Solution
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.
<script>
$("div[data-lg-child-id='2']").addClass("active");
$("div[data-lg-child-id='1']").removeClass("active");
</script>
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.
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.
<script>
$("div[data-lg-child-id='2']").addClass("active");
$("div[data-lg-child-id='1']").removeClass("active");
</script>
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.
Try to embed the non autogenerated section below the layout group by dragging the Embedded Section.
While trying this POC, I have embedded custom section like above pic inside dynamic layout 2 after layout group.
Why you have -- in line 2 in accord 2.JPG . Can you remove that line and try?
Let me know if you face any more issues.