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:
- Build a logicnet containing only questions or report items.
- Test your work by using a regular call node in your main application first.
- Once your logicnet is built, replace the call node in your main application with a collapsible section node.
- 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 demonstrates how to use the Collapsible Section part.