39
Views
4
Comments
Solved
Custom Accordion not closing other accordions when one is clicked
Application Type
Mobile, Reactive

I am Designing a custom accordion for my project, I have been able to open and close it as i want but the problem arises when I put multiple of them together. They all open at the same time and also I want to close the other ones when one is open.

Any help is appreciated.

Attaching OML for better understanding

Regards.

Accordian (1).oml
2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Rishabh,

As a possible solution, 

1) Keep the IsExpanded boolean block input parameter separate for each AccordionBlock instance to track the IsExpanded status of each block. Accordingly, you can define logic to toggle the variable value.

2) If you want to define the block inside a list, you can follow the pattern of defining an ad hoc boolean attribute to track the IsExpanded value of each accordion block. Additionally, include some logic to meet your requirement of closing the other ones when one accordion is open.

Demo app: Accordion

Refer to the attached oml (Accordion_Ben Screen)

I hope this helps you!


Kind regards,

Benjith Sam

Accordian.oml
2025-01-09 14-56-57
IQ78

Hi there,

use this accordion widget, instead.

https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/content/accordion/

regards

2025-05-28 14-01-18
Rishabh Gupta

Hello, 

I can't use the widget as there are different user-requirements, and thus a custom one is needed.


Regards.

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Rishabh,

As a possible solution, 

1) Keep the IsExpanded boolean block input parameter separate for each AccordionBlock instance to track the IsExpanded status of each block. Accordingly, you can define logic to toggle the variable value.

2) If you want to define the block inside a list, you can follow the pattern of defining an ad hoc boolean attribute to track the IsExpanded value of each accordion block. Additionally, include some logic to meet your requirement of closing the other ones when one accordion is open.

Demo app: Accordion

Refer to the attached oml (Accordion_Ben Screen)

I hope this helps you!


Kind regards,

Benjith Sam

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