Vincent Morneau
Collapsible
Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.
  • First
    Lorem ipsum dolor sit amet.
  • Second
    Lorem ipsum dolor sit amet.
  • Third
    Lorem ipsum dolor sit amet.
Selected Template Options
Component Name: Collapsible
Template: No Template
Template OptionValue(s)Comments
Use DefaultYes
Collapsible BehaviorAccordion
Popout
To create a popout collapsible, just add the popout template option.
  • First
    Lorem ipsum dolor sit amet.
  • Second
    Lorem ipsum dolor sit amet.
  • Third
    Lorem ipsum dolor sit amet.
Selected Template Options
Component Name: Popout
Template: No Template
Template OptionValue(s)Comments
Use DefaultYes
PopoutYes
Collapsible BehaviorAccordion
Options
There are two ways a collapsible can behave. It can either allow multiple sections to stay open, or it can only allow one section to stay open at a time, which is called an accordion. See below for a demo of each type.
Accordion
  • First
    Lorem ipsum dolor sit amet.
  • Second
    Lorem ipsum dolor sit amet.
  • Third
    Lorem ipsum dolor sit amet.
Selected Template Options
Component Name: Accordion
Template: Standard
Template OptionValue(s)Comments
Use DefaultYes
Collapsible BehaviorAccordion
Expandable
  • First
    Lorem ipsum dolor sit amet.
  • Second
    Lorem ipsum dolor sit amet.
  • Third
    Lorem ipsum dolor sit amet.
Selected Template Options
Component Name: Expandable
Template: Standard
Template OptionValue(s)Comments
Use DefaultYes
Collapsible BehaviorExpandable
Template Options
Template Options
Component Name: Template Options
Template: Standard
Template OptionValue(s)Comments
PopoutYes
Collapsible BehaviorAccordion
Collapsible BehaviorExpandable
Substitution Strings

  • Substitution Strings

  • #ICON_CSS_CLASSES# Icon name for the collapsible item
  • #TITLE# Title for the collapsible item
  • #DESCRIPTION# The content below the collapsible item
Sample Query
select 'filter_drama' icon_css_classes
	, 'First' title
	, 'Lorem ipsum dolor sit amet.' description
from dual

union all

select 'place' icon_css_classes
	, 'Second' title
	, 'Lorem ipsum dolor sit amet.' description
from dual
Using Region Template
  • Collapsible 1
    Collapsible 1
    Content 1
  • Collapsible 2
    Collapsible 2

    Content 2
  • Collapsible 3
    Collapsible 3
    Content 3