Collapsible Container
Last updated
Last updated
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.
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.
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.
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.
These are the steps for creating a Collapsible Container:
Open the Form Editor of your responsive form
Find Collapsible Container in Templates subsection of the Bootstrap 12-Grid section in the components' pallet
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.
Add the class show for Titanium Client / in for NGCLient 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.
You can decide to remove the icon in the toggle section and place any component of your choice to be used as icon.
