Groups are the most basic container type. It can be placed anywhere on the page, including inside of another container.

It can be used to organize other elements, for aesthetic purposes (by styling it) and to pass data.

Groups can be displayed and hidden based on different conditions and user actions. By hiding and showing groups that contain other elements you can let your users navigate your app without having to go to another page.

When a group is hidden, you can set it to collapse its height and width to give room for other groups to be displayed. To the user, the switch is instant – the content on the page simply seems to change without any delay or flickering.

In the animation above we are toggling the visibility of Group A and Group B. The result is that one replaces the other as the blue group collapses its height. This is how you build single-page applications (often abbreviated to SPA) where users can visit different sections of the page while never having to reload.

There are two ways to hide and show groups: conditions and actions.

The first way is to place conditions on the group that looks for specific criteria to be true. A common way to control user navigation is to use conditions together with URL parameters.

In the condition above we are checking the URL for a parameter called navigation. If the value of the parameter is edit user the element is visible.

The second way to hide and show groups is to use actions. You can choose to instantly show/hide the group by using the Toggle an element action, or you can apply an animation using the Animate an element action.