Simple Collapsible

Overview

The Simple Collapsible container allows to toggle the visibility of its content in a Servoy Responsive Form. It has a toggle section and a content section; the toggle section is always visible and toggles the visibility of the content section when the user clicks on it.

Simple Collapsible

Note: layout containers are not stateful, therefore the Simple Collapsible 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 content section.

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

Simple Collapsible Outline

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

Create a Simple Collapsible

Create a Simple Collapsible

These are the steps for creating a Simple Collapsible:

1. Open the Form Editor of your responsive form

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

3. Drag and drop the Simple Collapsible 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 Simple Collapsible, except for Container, Column or Flex Item

Change default toggle to collapsed

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

Collapsed

Remove the class in from the simple-collapsible-content class property to collapse the content by default and add the class collapsed in the simple-collapsible-toggle class property.

Collapsed Simple Container

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.

You can also change the default icon in the styleSheet of your solution using CSS3.

.simple-collapsible-toggle > .simple-collapsible-icon {
	font-family: "Glyphicons Halflings";
	display: inline-block;
}
.simple-collapsible-toggle > .simple-collapsible-icon:before {
	content: "\e113"; /* GlyphIcon chevron down when expanded */
}
.simple-collapsible-toggle.collapsed > .simple-collapsible-icon:before {
	content: "\e114"; /* GlyphIcon chevron up when collapsed */
}