Dynamic Collapse Reference

Organize content in show/hide containers with amazing effects. Split your web content into accordion-like fields with the all-new App Connect Bootstrap 5 Collaps, which helps you to implement collapsing sections anywhere on your site. Enrich content with HTML, arrange your text, images, videos and even whole pages and style them to create an intuitive and user-friendly layouts, which will fit perfectly any window or monitor size. Bootstrap 5 component. Add the component and configure its properties in the Inspector.

Inspector Property Groups

Dynamic Collapse Properties

Property	Type	Details
ID	text	Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Attribute: id
Class	text	Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Attribute: class
Show	boolean	Initial collapsed state. Controls the initial state of the collapse element. When enabled, the collapse starts expanded by adding show to the collapse element. Bootstrap docs: Collapse Attribute: show
Parent	droplist	Accordion parent selector. Enables accordion behavior by setting data-bs-parent . When set, only one collapse item inside the parent stays open at a time (opening one closes the others). Bootstrap docs: Accordion example Attribute: data-bs-parent Options: None

Text

Property	Type	Details
Advanced	css_toggle	Advanced layout options. Advanced layout options provided by the rule. These typically map to Bootstrap utility classes (spacing, flex, display) to fine-tune layout. Bootstrap docs: Utilities API
Color	color_group	Options: text-primary, text-primary-emphasis, text-secondary, text-secondary-emphasis, text-success, text-success-emphasis
Text Opacity	range
Align	button_group	Controls text alignment. Controls text alignment using Bootstrap text utilities. Applies classes like text-start , text-center , text-end , including responsive variants (e.g. text-md-center ). Bootstrap docs: Text utilities Options: text-start, text-center, text-end
Font Weight	button_group	Controls font weight. Controls font weight using Bootstrap font-weight utilities. Applies fw-light , fw-normal , fw-bold , etc. Bootstrap docs: Font weight Options: B, B+, N, L, L+
Line Height	button_group	Controls line height. Controls line height using Bootstrap line-height utilities. Applies lh-1 , lh-sm , lh-base , or lh-lg . Bootstrap docs: Line height Options: 1, SM, BS, LG

Appearance

Property	Type	Details
Back Color	color_group	Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle
Back Opacity	range	Controls background opacity. Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities
Width	range	Sets a Bootstrap width utility class. Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing
Height	range	Sets a Bootstrap height utility class. Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing
Opacity	range	Sets the opacity utility class. Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity
Shadow	droplist	Applies a Bootstrap shadow utility. Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows Options: Default, None, Small, Regular, Large

Border

Property	Type	Details
Border	enum	Options: All, None, Top, End, Bottom, Start
Width	range	Controls border width. Controls border width using Bootstrap border utilities. This applies classes like border , border-2 , border-3 , etc. Bootstrap docs: Border width
Rounded	droplist	Options: Default, All, None, Top, End, Bottom
Radius	droplist	Options: Default, Small, Medium, Large, X-Large, XX-Large
Border Color	colorlist	Options: Default, Primary, Primary Subtle, Secondary, Secondary Subtle, Success

Spacing

Property	Type	Details
Margin<br>&<br>Padding	spacing
X Gutter	range	Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters
Y Gutter	range	Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters

Display

Property	Type	Details
Hide on	button_group	Options: xs, sm, md, lg, xl, xxl
Print	button_group
Visually Hidden	boolean
Focusable	boolean

Actions

Show

Show the Collapse

Hide

Hide the Collapse

Toggle

Toggle the Collapse

Dynamic Attributes

Collapse Show

Fires before the collapse starts to show.

Attribute property	Type	Details
When:	text	Choose dynamic data binding.

Dynamic Events

Show

Fires before the collapse starts to show.

Event option	Type	Details
Action:	text	Choose the action to execute.

Shown

Fires after the collapse is shown.

Event option	Type	Details
Action:	text	Choose the action to execute.

Hide

Fires before the collapse starts to hide.

Event option	Type	Details
Action:	text	Choose the action to execute.

Hidden

Fires after the collapse is hidden.

Event option	Type	Details
Action:	text	Choose the action to execute.