# 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.
**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.
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](/reference/servoy-developer/object-editors/form-editor.md) 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](/guides/develop/application-design/forms/layout-management/home/b12grid.md#container), [Row](/guides/develop/application-design/forms/layout-management/home/b12grid.md#row)
4. Add other needed components inside the **Collapsible Container**, **except** for [Container](/guides/develop/application-design/forms/layout-management/home/b12grid.md#container), [Column](/guides/develop/application-design/forms/layout-management/home/b12grid.md#column) or [Flex Item](/guides/develop/application-design/forms/layout-management/home/flexbox.md#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.
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.
## 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.servoy.com/guides/develop/application-design/forms/layout-management/home/collapsible-container.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.