> 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/guides/develop/application-design/forms/layout-management/home/simple-collapsible.md).
# 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.
**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.
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](/reference/servoy-developer/object-editors/form-editor.md) 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](/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 **Simple Collapsible**, **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 collapsed
The collapsible container is expanded by default; you can modify the classes of its sections to change the default state to collapsed.
Remove the classes `in` and `show` 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.
## 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.
```css
.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 */
}
```
---
# 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/guides/develop/application-design/forms/layout-management/home/simple-collapsible.md?ask=&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.
