HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Collapsible
A container for hiding and showing content
Examples
Header
Content

HTML

<div id="example">
  <div class="hx-collapsible-heading">Header</div>
  <div class="hx-collapsible-content"><div style="padding:1em;font-size:2em">
    Content
  </div>
  </div>
</div>

JavaScript

var collapsible = new hx.Collapsible('#example')
Api
Change Log
Prototypes
hx.CollapsibleextendsEventEmitter
Create one of these for each collapsible in your page to make it respond to mouse clicks. This object also provides ways to open and close the collapsible programmatically, listen for changes in the state of the collapsible and check the state at any time.
Constructors
hx.CollapsibleselectorStringoptionsObject
Arguments
selectorString
A css selector that uniquely identifies the collapsible in the DOM.
options
Properties
addIconBoolean
Supply false to prevent the arrow icon being added to the start of the collapsable header.
Default: true
animateBoolean
Whether or not to animate the collapsible state transition. The default is true - which means animation will be used.
Default: true
lazyContentcontentHTMLElement
An optional parameter that lets you populate the collapsible at the moment that it is first expanded. This is useful when you want to delay the loading of some data until it is needed by the user, or not load it at all if they never open the collapsible.
This could also be achieved by listening for a 'show' event, however using the lazyContent method has the advantage that the content will be added to the collapsible before the opening animation happens, rather than after, as would be the case if on('show', ...) was used.
This function will only be called once, when the collapsible is first opened.
Arguments
contentHTMLElement
The content div of the collapsible as a html node. The function should append any content to this div.
visibleBoolean
Whether or not the collapsible should start expanded. The default is false - collapsed.
Default: false
Events
changeBoolean
Emitted when the state of the collapsible is changed. The data provided with the event is a boolean - true when the collapsible has just been opened, false when it has just been closed.
hideend
Emitted when the collapsible is closed and animations have finished. No extra data with this event type
showend
Emitted when the collapsible is opened and animations have finished. No extra data with this event type
Methods
hideanimateBooleancallbackFunctionCollapsible
Causes the collapsible to collapse, hiding its contents.
Arguments
animateBoolean
Whether or not to animate the collapsible state transition. The default is true - which means animation will be used.
Default: The value passed in as the animate option in the constructor
callback
Called when the animation finishes. The callback will only be run if the state changes.
Returns
Collapsible
This Collapsible for chaining
isOpenBoolean
Returns true if the collapsible is currently open. False if not.
Returns
Boolean
showanimateBooleanCollapsible
Causes the collapsible to open, revealing its contents.
Arguments
animateBoolean
Whether or not to animate the collapsible state transition. The default is true - which means animation will be used.
Default: The value passed in as the animate option in the constructor
Returns
Collapsible
This Collapsible for chaining
toggleanimateBooleanCollapsible
Causes the collapsible to open or close, depending on its current state.
Arguments
animateBoolean
Whether or not to animate the collapsible state transition. The default is true - which means animation will be used.
Default: The value passed in as the animate option in the constructor
Returns
Collapsible
This Collapsible for chaining
Functions
hx.initializeCollapsiblesselectorStringoptionsObject
Initialises all the collapsibles that match a css selector in a page and returns the Collapsible objects as an array.
Arguments
selectorString
A css selector that selects the collapsible elements you wish to initialise.
options
The options to use when creating the collapsibles
Properties
addIconBoolean
Supply false to prevent the arrow icon being added to the start of the collapsable header.
Default: true
animateBoolean
Whether or not to animate the collapsible state transition. The default is true - which means animation will be used.
Default: true
lazyContentcontentHTMLElement
An optional parameter that lets you populate the collapsible at the moment that it is first expanded. This is useful when you want to delay the loading of some data until it is needed by the user, or not load it at all if they never open the collapsible.
This could also be achieved by listening for a 'show' event, however using the lazyContent method has the advantage that the content will be added to the collapsible before the opening animation happens, rather than after, as would be the case if on('show', ...) was used.
This function will only be called once, when the collapsible is first opened.
Arguments
contentHTMLElement
The content div of the collapsible as a html node. The function should append any content to this div.
visibleBoolean
Whether or not the collapsible should start expanded. The default is false - collapsed.
Default: false
Classes
hx-collapsible
Given to the container element for a collapsible
Classes
hx-collapsible-body
Given to the header section of a collapsible
hx-collapsible-heading
Given to the header section of a collapsible
Classes
hx-collapsible-toggle
Given to an element to make it the clickable toggle for the collapsible. By default, without this class, the hx-collapsible-heading classed element will be the toggle.