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
Side Collapsible
A module for adding content to the side of an element or page that can be opened or closed.
Examples
Closed Text
Open Text
Content
Closed Text
Open Text
Content

HTML

<div class="example-container">
  <div id="exampleLeft" class="example-left">
    <div class="hx-side-collapsible-heading-closed">Closed Text</div>
    <div class="hx-side-collapsible-heading-open">Open Text</div>
    <div class="hx-side-collapsible-content">Content</div>
  </div>

  <div id="exampleRight" class="example-right">
    <div class="hx-side-collapsible-heading-closed">Closed Text</div>
    <div class="hx-side-collapsible-heading-open">Open Text</div>
    <div class="hx-side-collapsible-content">Content</div>
  </div>
</div>

JavaScript

new hx.SideCollapsible('#exampleLeft')
new hx.SideCollapsible('#exampleRight', {position: 'right', animate: false})

CSS

.example-container {
  position: relative;
  height: 300px;
}

.example-left {
  width: 500px;
  height: 300px;
  left: 0;
  position: absolute;
}

.example-right {
  width: 500px;
  height: 300px;
  right: 0;
  position: absolute;
}
Api
Change Log
Prototypes
hx.SideCollapsibleextendsEventEmitter
Constructors
hx.SideCollapsibleselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
options
Properties
animateBoolean
Whether the collapsible should animate by default.
Default: true
positionString
What side the collapsible should be on, can be either 'left' or 'right'
Default: 'Left'
rotateHeadingBoolean
Whether the closed heading should be rotated
Default: true
visibleBoolean
Whether the side collapsible should be open or closed when initialising.
Default: false
Events
changeBoolean
Emitted when the collapsible's state changes. The data that comes with this event is a boolean.
hideend
Emitted when the collapsible is closed and animations have finished. No extra data with this event type
hidestart
Emitted when the collapsible is hidden. 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
showstart
Emitted when the collapsible is opened. No extra data with this event type
Methods
hideanimateBooleancallbackFunctionSideCollapsible
Hide the collapsible content
Arguments
animateBoolean
Whether or not to animate the close action. Defaults to the animate option passed in when constructing the collapsible.
callback
Called when the animation finishes. The callback will only be run if the state changes.
Returns
SideCollapsible
This SideCollapsible
showanimateBooleancallbackFunctionSideCollapsible
Show the collapsible content
Arguments
animateBoolean
Whether or not to animate the open action. Defaults to the animate option passed in when constructing the collapsible.
callback
Called when the animation finishes. The callback will only be run if the state changes.
Returns
SideCollapsible
This SideCollapsible
toggleanimateBooleancallbackFunctionSideCollapsible
Toggles the visiblity of the collapsible content.
Arguments
animateBoolean
Whether or not to animate the action. Defaults to the animate option passed in when constructing the collapsible.
callback
Called when the animation finishes. The callback will only be run if the state changes.
Returns
SideCollapsible
This SideCollapsible
Classes
hx-side-collapsible
The class added to the side collapsible container
Classes
hx-side-collapsible-content
The class to add to the content to show when the collapsible is open.
hx-side-collapsible-heading-closed
The class to add to the heading to show when the collapsible is closed. This is rotated through 90 degrees.
Extra Classes
hx-side-collapsible-heading-no-hover
The class to add to the collapsible heading to disable the hover styles.
hx-side-collapsible-heading-open
The class to add to the heading to show when the collapsible is open.
Extra Classes
hx-side-collapsible-heading-no-hover
The class to add to the collapsible heading to disable the hover styles.