How to remove the bottom header of accordion when opening/collapsing it?

The picture above is my accordion.

When it was collapsed, it looks like this:

I tried searching for the CSS in the theme (LisbonTheme), but no luck.

I know I'm doing something wrong here since I am not also familiar in CSS.

How will I be able to remove the bottom border of accordion header (Color grey) when it was collapsed?


Many thanks!!!

I don't know which kind of application you are building, Traditional or Reactive? Because when I using accordion in the traditional web app,  By default the borderline only appears when it's open, also on the top, not the bottom. 

Anyway, I believe you can change CSS to achieve this. Please watch the URL bellow, It's should help you.

https://www.outsystems.com/learn/lesson/2100/live-style-guides-in-outsystems

Kindly regards

Hi Arci,

As Tom mentinoed, it depends which type of app are you using. For instance in reactive, You may have to modify the css of .section-expandable.is--open . The default CSS looks as below.

section-expandable-title {
  border-top: var(--border-size-m) solid var(--color-primary);
}

Remove the solid from its property of border-top.


Regards,

Swatantra