Collapsible Panel

The Collapsible Panel is a container that holds other controls and provides an easy expand/collapse mechanism.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

This section control is used to give your Coaches a clean and sleek appearance.  Use the Collapsible Panel to put other controls inside of it, like a text box for example.



Initially Collapsed Panel will be closed on page load

Panel Group Name Group multiple panels together, when one is expanded the other will be collapsed regardless of where they are on the page, or how they might be nested.


Color Style

Width Value in px, %, em For example: 50px, 20%, 0.4em, if no unit is specified px is assumed

Height Value in px, %, em For example: 50px, 20%, 0.4em, if no unit is specified px is assumed


These are the configuration option settings...

This is the result...

Notice the icon in the top right corner, where you can click to expand or collapse this section.


With the Collapsible Panel section, there are 3 types of event handlers:

  • On Load When the page loads
  • On Expand When the Collapsible Panel is expanded
  • On Collapse When the Collapsible Panel is collapsed

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.


For detailed information on the available methods for this control, access the JS Doc file.

Related Article(s)

SPARK Layout Capabilities


  • Author: Courtney Silva
  • Date Created: June 5, 2015
  • Date Modified: July 27, 2015
Was this article helpful?
0 out of 0 found this helpful