0

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 demonstrates how to use the Collapsible Section part.

Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like Follow
  • 7 mths agoLast active
  • 45Views
  • 3 Following

Home