38
Views
4
Comments
Solved by AI
[OutSystems UI] How to open and Close Accordion Item ?
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hi there,

I am wondering how to open and close Accordion Item programatically?

In a forum there is an answer, but i cannot find the property IsExpended.

https://www.outsystems.com/forums/discussion/74440/programatically-open-and-close-an-accordionitem/


regards and thanks


2023-12-26 10-35-28
OutSystems Neo
Staff
Solution by AI
AI Generated

To open and close an Accordion Item programmatically, you can use the available client actions in OutSystems UI. These actions are specifically designed for managing the state of Accordion Items, and the IsExpanded property itself is not used for such programmatic manipulation.

Solution:

Instead of trying to modify the IsExpanded property, you can use the following client-side actions:

  • AccordionItemExpand: Expands a specific Accordion Item.
  • AccordionItemCollapse: Collapses a specific Accordion Item.
  • AccordionItemExpandAll: Expands all Accordion Items.
  • AccordionItemCollapseAll: Collapses all Accordion Items.

Here's how you can perform the operation:

  1. Assign a unique Name to each AccordionItem under the properties panel. This ensures the widget is accessible programmatically.
  2. Use the corresponding client action (AccordionItemExpand or AccordionItemCollapse) and set the WidgetId input of the action to the runtime ID of the Accordion Item. You can obtain the runtime ID using the Name you assigned, for example: AccordionItemName.Id.

Example Implementation:

Steps:

  1. Assign a Name (e.g., AccordionItem1) to your Accordion Item in the Properties panel.
  2. Create a Button or Trigger, and in its On Click event, add a client action like AccordionItemExpand or AccordionItemCollapse.
  3. Set the WidgetId parameter of the client action to AccordionItem1.Id.

Screenshot Insight:

From the description, you already have the "Content\AccordionItem" properties panel open. Make sure to fill in the Name property (e.g., AccordionItem1) so that the Accordion Item can be targeted programmatically.

Additional Notes:

This approach was confirmed in OutSystems UI documentation and forums. Specifically, when migrating to the OutSystems UI 2.14.0 or higher, it was clarified that the StartsExpanded property only works during initialization and cannot be used to toggle the state dynamically Accordion Item not expanding despite input parameter on True.

For more detailed instructions on using the Accordion pattern, refer to the official documentation Accordion.

This answer was AI-generated. Please read it carefully and use the forums for clarifications
2025-10-03 12-01-30
Davi Santos

It worked like a charm!


UserImage.jpg
Supriya Malla
Solution

Hi @IQ78,

Have you tried using the 'AccordionItemExpand' and 'AccordionItemCollapse' client actions from outsystems UI?

2025-07-22 10-30-27
Mandar Deshpande

The Accordion widget in Reactive behaves a bit differently as compared to one in Traditional web, specifically with the IsExpanded property. This property is not available by default in Reactive.

You can use a local boolean variable to control its visibility. 

UserImage.jpg
Supriya Malla
Solution

Hi @IQ78,

Have you tried using the 'AccordionItemExpand' and 'AccordionItemCollapse' client actions from outsystems UI?

2023-12-26 10-35-28
OutSystems Neo
Staff
Solution by AI
AI Generated

To open and close an Accordion Item programmatically, you can use the available client actions in OutSystems UI. These actions are specifically designed for managing the state of Accordion Items, and the IsExpanded property itself is not used for such programmatic manipulation.

Solution:

Instead of trying to modify the IsExpanded property, you can use the following client-side actions:

  • AccordionItemExpand: Expands a specific Accordion Item.
  • AccordionItemCollapse: Collapses a specific Accordion Item.
  • AccordionItemExpandAll: Expands all Accordion Items.
  • AccordionItemCollapseAll: Collapses all Accordion Items.

Here's how you can perform the operation:

  1. Assign a unique Name to each AccordionItem under the properties panel. This ensures the widget is accessible programmatically.
  2. Use the corresponding client action (AccordionItemExpand or AccordionItemCollapse) and set the WidgetId input of the action to the runtime ID of the Accordion Item. You can obtain the runtime ID using the Name you assigned, for example: AccordionItemName.Id.

Example Implementation:

Steps:

  1. Assign a Name (e.g., AccordionItem1) to your Accordion Item in the Properties panel.
  2. Create a Button or Trigger, and in its On Click event, add a client action like AccordionItemExpand or AccordionItemCollapse.
  3. Set the WidgetId parameter of the client action to AccordionItem1.Id.

Screenshot Insight:

From the description, you already have the "Content\AccordionItem" properties panel open. Make sure to fill in the Name property (e.g., AccordionItem1) so that the Accordion Item can be targeted programmatically.

Additional Notes:

This approach was confirmed in OutSystems UI documentation and forums. Specifically, when migrating to the OutSystems UI 2.14.0 or higher, it was clarified that the StartsExpanded property only works during initialization and cannot be used to toggle the state dynamically Accordion Item not expanding despite input parameter on True.

For more detailed instructions on using the Accordion pattern, refer to the official documentation Accordion.

This answer was AI-generated. Please read it carefully and use the forums for clarifications
2025-10-03 12-01-30
Davi Santos

It worked like a charm!


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