42
Views
2
Comments
How to make an accordion item open upwards
Application Type
Reactive

Hey guys, 

I've been trying to follow some designs where an accordion opens upwards. I made a clone of OutSystemsUI, and swapped the positions of the title and the content wrappers. However, they would like the accordion to close when it is clicked at the top of the accordion instead of the bottom. 

I've attached the change I made below. 


And this was the result

It is possible for the Icon to appear at the top once the accordion is open? And can I have the opposite icons as well (from up to down and down to up)? 


Thank you for your help.

Kind Regards,

Emmanuel

2025-09-05 10-36-14
Diogo Madeira
So you want the arrow, to be in the content area, once its openned, but in the title area when it's closed?

You can have 2 icons, wrapped by an IF, that checks if the accordion is open or not. I'm not sure it would get the transition you want, but I think that's what you want

UserImage.jpg
Emmanuel Sobamowo

Hi Diogo, thanks for the reply.

I think that solution should work for the icons. Thank you :)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.