7
Views
2
Comments
Solved
[Outsystems UI] Nested accordion icon is wrong
Application Type
Reactive
Service Studio Version
11.9.1 (Build 33435)

Hello everyone!

I want to have an accordion that can have other accordions inside it. Besides that, i changed the accordion icon for expanding/collapsing to be a '+' when collapsed and a '-' when expanded.

My problem is, when i have a nested accordion, because the parent accordion is open and therefore showing the '-' icon, then the child (nested) accordion also possesses the that '-' even when the content is collapsed. This leads me to think that the 'rule' for the icon is not distinguished between each different accordion.

I have read that this is an Outsystems UI bug, since the original accordion icon does the same, and someone suggested that it needs to be changed from the Javascript. But I'm not sure how to do that. Anyone can help me?

Here's an example of what i mean, with the basic outsystems UI accordion icons.

Rank: #171
Solution

Hello Inês,

This problem is happening because of this CSS style from OutSystems UI:

.section-expandable.is--open .section-expandable-icon {

        -webkit-transform: rotate(180deg);

        transform: rotate(180deg);

}


This class is changing every icon inside your expanded section, I changed it for you so it will change only the icon from the title section, this way:



For it to work just place this code in your CSS sheet:

.section-expandable.is--open>.section-expandable-title .section-expandable-icon {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.section-expandable.is--open .section-expandable-icon {
    -webkit-transform: unset;
    transform: unset;
}

It will remove the previous style and apply the new one so the behavior you are looking for will work as expected, see:


I also attached a sample for you.


I hope this helps :)
If you have any questions about it, or if you didn't understand what I did, please ask here again!

Cheers and Regards,

RR :)

NestedAccordions.oml

Rank: #5915

Thank you so much for your help! I used this CSS and it worked and i was able to make it work with the different icons too.

Will mark it as a solution :)