Collapsible Container

Overview

The Collapsible Container is a responsive container, to be used in a Servoy Responsive Form, which behaves as a toggle on small screen sizes. When the size of the screen is smaller than 992px it presents a toggle section on which the user can click to toggle the visibility of its content. On medium and large screens instead it always displays its content and hides its toggle section.

Collapsible Container

Note: layout containers are not stateful, therefore the Collapsible Container will always return to its design state when the user navigates away from the form or the browser is refreshed.

Getting Started

You can drop Servoy Web Components and nest other 12Grid containers into both toggle and container sections.

The Collapsible Container uses attributes of its inner div containers to achieve the collapsible behavior. To obtain the collapsible behavior the data-target attribute of the collapsible-toggle must target the correspondent collapsible-container via CSS selector.

Collapsible Container Outline

It is recommended to edit the default value and set an unique id attribute in the collapsible-container; adjust accordingly the data-target of the collapsible-toggle.

Create a Collapsible Container

Create a Collapsible Container

These are the steps for creating a Collapsible Container:

1. Open the Form Editor of your responsive form

2. Find Collapsible Container in Templates subsection of the Bootstrap 12-Grid section in the components' pallet

3. Drag and drop the Collapsible Container component in:

   • empty space of the form, as an independent component

   • inside any other container components, except Container, Row

4. Add other needed components inside the Collapsible Container, except for Container, Column or Flex Item

Change default toggle to expanded

The collapsible container is collapsed by default on small screens; you can modify the classes of its sections to change the default state to be expanded.

Expanded

Add the class in to the div having the collapsible-container class property to expand the content by default and remove the class collapsed from the div having collapsible-toggle class property.

Expanded Collapsible Container Outline

Customize the toggle icon.

You can decide to remove the icon in the toggle section and place any component of your choice to be used as icon.