> For the complete documentation index, see [llms.txt](https://community-test.logicnets.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://community-test.logicnets.com/release-9/platform-documentation/process-nodes/collapsible-section.md).
# Collapsible Section
## Description
Collapsible content allows you to minimize the amount of vertical space required to display content in an application. To display content that might otherwise take up a large amount of vertical space, you can employ the *Collapsible Section* part. When your end users run the application and come to a page with collapsible content, they can expand the sections to view the content. By default, the system sets the scroll position at the last-clicked position within the collapsible section.
Here is an example of how collapsible content displays to the end-user, with the first section expanded and subsequent sections collapsed.
## Use
You can use collapsible sections in Starter Applications, but they are most frequently used in Assessment Framework applications. You can use collapsible sections in Assessment Framework applications in two ways:
* **Observation Panel**. This is the Q\&A section of your screen - the center panel - and you can use collapsible sections to organize sets of questions into categories or areas of assessment. When combined with tabs, they give you flexibility in how and where to organize the different sections of your assessment. Typically, larger sections of material are arranged using tabs and smaller subsections within that area of focus are organized into collapsible sections.
* **Report Panel**. This is the right side of the screen in an application that uses the Assessment Framework. If your application echoes back answers from the user or presents results or a captioned report, you can organize the nodes into collapsible sections so the whole space can be dedicated to a subset of the assessment output, as in the screenshot above.
## Using a Collapsible Section in a Logicnet
The collapsible section part is in the *Call Parts* dropdown menu of the Node Toolbox.
This part works in similar fashion to a call node, but it includes additional parameters. The best approach to building a collapsible section is as follows:
1. Build a logicnet containing only questions or report items.
2. Test your work by using a regular call node in your main application first.
3. Once your logicnet is built, replace the call node in your main application with a collapsible section node.
4. Complete the additional parameters, including section header and styling tags.
### Editor Fields
| Tab | Field Name | Description/Use | Type/Options | Optional/Mandatory |
| ---------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------ |
| Call | Library project | If the application uses logicnets from a library project, select the target library here. See the Libraries article for more information. | Text | Optional |
| Call | Logicnet to call | This is the name of the logicnet containing the nodes to display when the collapsible section is expanded. | Text | Mandatory |
| Call | Context path | This field can hold the name of the container that holds all of the variables of the called logicnet. This field is normally left blank. | Text | Optional |
| Call | Collection | This field is not used for a collapsible section. | Text | Mandatory |
| Call | Class | This field must be set to *collapsible\_section* for the part to work in this way. | Text | Mandatory |
| Parameters | Source | This is the name of the collection of the items to be displayed. | Text | Mandatory |
| Parameters | Section header | This is the field the system will display at the top of a section of collapsible text. Users can also specify a data object to use in this parameter; for example, *header\_name = $(my\_header\_name\_object).* | Text/HTML | Optional |
| Parameters | Header style class | This field allows you to specify a style class CSS selector for styling the header. Add the CSS selector and declarations to a custom CSS file to alter the way the header looks in you application. | Text | Optional |
| Parameters | Data object
v 7.4+
| Use this field to control/store the state of the collapsible section. When the data object has the value '1', it means that the collapsible section is expanded. | Data object | Optional |
| Parameters | Expand/collapse callback
v 7.4+
| Use this to link a client-side JavaScript callback function to the collapsible section, which can be used for the additional handling of the expanded/collapsed event of the collapsible section. | Text | Optional |
| Parameters | Initially expanded
v 7.4+
| (Only when no data object specified) this option controls the initial state of the collapsible section. This also applies after a full page reload. | No \| Yes | Optional |
## Advanced Tips
You can change the icon the system displays to denote collapsed and expanded sections. You do this in the CSS with the following selector and declarations:
```
.collapsible_section_icon_expanded {
background-image: url(../images/[image-filename])
}
.collapsible_section_icon_collapsed {
background-image: url(../images/[image-filename])
}
```
## Example
The following [example project](/release-9/example-gallery/example-projects-for-parts/collapsible-section-example-project-before-v7-4.md) demonstrates how to use the Collapsible Section part.
---
# 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://community-test.logicnets.com/release-9/platform-documentation/process-nodes/collapsible-section.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.