The Collapsible Container component for Retool Mobile

A container to group other components.

Version: Cloud and 3.191 Edge

Demo

Properties

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

align

The horizontal alignment of the contents.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description left Left alignment. center Center alignment. right Right alignment.
Default	left

Examples

"center"

---

collapsedIcon

The icon that's displayed when collapsed.

Type	string
Mutability	Control Usage Retool UI Inspector

---

collapsible

Whether collapsible add-ons are configured.

Type	boolean
Mutability	Control Usage Retool UI Inspector

---

cornerType

The corner style to use.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description square Square corners. round Rounded corners. circle Circular corners.

---

elevation

Whether items are rendered with a raised appearance.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description none No elevated style. raised Raised elevated style.

---

events

A list of configured event handlers that trigger actions or queries.

Type	array
Array values	object
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers

Array Object Properties

event

The event that triggers the action. Refer to the events section for details of available events for this object.

Type	string
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers > Event

---

method

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

Type	string
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers > Edit event handler > Run script actions

---

type

The type of action to perform.

Type	string
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers > Edit event handler > Action
Allowed Values	Value Description datasource Control query. widget Control component. script Run script. state Set variable. localStorage Set localStorage. util Perform utility action (e.g., Open URL or Confetti).

---

---

expandedIcon

The icon that's displayed when expanded.

Type	string
Mutability	Control Usage Retool UI Inspector

---

gap

The gap between components.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description 0 4 8 12 16 24 32 48 64 128 256

---

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Hidden Method setHidden()
Default	false

Examples

true

---

justify

The horizontal alignment of the contents.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description left Left alignment. center Center alignment. right Right alignment. stretched Justified alignment

---

layout

The layout of content.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description row Horizontal row layout. column Vertical column layout.

---

padding

The amount of padding to render inside.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector > Spacing > Padding
Allowed Values	Value Description 4px 8px Normal padding. 0 No padding.
Default	4px 8px

Examples

4px 8px

---

showBody

Whether to show the body.

Type	boolean
Mutability	Read-only

---

showBorder

Whether to show a border.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Show border
Default	false

Examples

true

---

title

The title text to display.

Type	string
Mutability	Control Usage Retool UI Inspector

---

width

The width.

Type	number
Format	Integer
Mutability	Control Usage Retool UI Inspector

Examples

1280

---

widthGrowFactor

Sets the width grow factor of a width item's main width size, similar to the flex-grow CSS property.

Type	unknown
Mutability	Read-only

---

Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

collapsibleContainer.setHidden()

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition

collapsibleContainer.setHidden(hidden)

Parameters

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Hide collapsibleContainer.

collapsibleContainer.setHidden(true);

Unhide collapsibleContainer.

collapsibleContainer.setHidden(false);

---

Events

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

Event	Description
Click	An item is clicked or pressed.