> For the complete documentation index, see [llms.txt](https://docs.servoy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.servoy.com/reference/servoyextensions/layout/home/collapsible-container.md).

# 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.

![Collapsible Container](https://content.screencast.com/users/paronne/folders/Jing/media/dac324f1-368c-4487-8f53-d5e00018cdce/2017-10-13_1737.png)

**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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.servoy.com/reference/servoyextensions/layout/home/collapsible-container.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.