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
Updated: 24 Jun 2020 10:54 EDT
Capgemini
NO
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.
CBA
AU
Thanks for the explanation Durai..!
Update data-lg-child-id='2' with the layout you want to open by default - I don't want to open any layout by default,
the default layout or tab should open on demand only
Capgemini
NO
If you want to close everything by default, you can Ignore line 2 from the above script.
Here is the updated script:
<script>
$("div[data-lg-child-id='1']").removeClass("active");
</script>
This will collapse the first one.
CBA
AU
That's great,
Add this section directly below the Layout group- How to configure this in section or layout, I tried dragging it directly but its not working. Thanks again for your reply.
PFA
Capgemini
NO
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.