Collapsible Container
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 it's content. On medium and large screens instead it always display it's content and hide it's toggle section.
Note: layout containers are not stateful, therefore the Collapsible Container it will always return to it's 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 section.
The Collapsible Container uses attributes of it's inner div containers to achieve the collapsible behavior. To obtain the collapsible behavior the "data-target" attribute of the "collapsible-toggle" must target the correspondant "collapsible-container" via CSS selector.
Is reccomanded to edit the default value and set an unique "id" attribute in the "collapsible-container"; adjust accordingly the "data-target" of the "collapsible-toggle".
Change default toggle to expanded
The collapsible container is collaped by default on small screens; you can modify the classes of it's sections to change the default state to be 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.
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.
Last updated
