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
Morph Section
Two classes for creating elements that transform.
Examples

HTML

<div id="container" class="hx-morph-section hx-margin">
  <button class="hx-btn hx-positive hx-morph-toggle">Register</button>
  <div class="hx-morph-content hx-pad hx-border">
    <form id="form" class="hx-form"></form>
  </div>
</div>

JavaScript

new hx.Form('#form')
  .addEmail('Email')
  .addPassword('Password')
  .addSubmit('Submit')

new hx.MorphSection('#container')
Api
Change Log
Prototypes
hx.InlineMorphSection
A base class for building inline morphing sections.
Constructors
hx.InlineMorphSectionselectorString / HTMLELemententerEditModeFunctionexitEditModeFunction
Arguments
selectorString / HTMLELement
A selector that uniquely identifies the element on the page.
enterEditMode
exitEditMode
Events
hide
Emitted when the hidden content is hidden.
show
Emitted when the hidden content is shown.
Methods
hideInlineMorphSection
Hides the hidden content.
Returns
InlineMorphSection
Returns this morph section for chaining
showInlineMorphSection
Shows the hidden content.
Returns
InlineMorphSection
Returns this morph section for chaining
toggleInlineMorphSection
Toggles the visibilty of the section
Returns
InlineMorphSection
Returns this morph section for chaining
visibleshowBooleanInlineMorphSection
Sets the visibilty of the section
Arguments
showBoolean
True means that the normally hidden content will be shown.
Returns
InlineMorphSection
This InlineMorphSection
visibleBoolean
Gets the visibilty of the section
Returns
Boolean
The current visibility where true means that the normally hidden content is visible.
hx.MorphSectionextendsEventEmitter
A base class for adding morph sections.
Constructors
hx.MorphSectionselectorString / HTMLELementoptionsObject
Arguments
selectorString / HTMLELement
A selector that uniquely identifies the element on the page.
options
The options to use when setting up the morph section
Properties
animateBoolean
Whether or not to animate the section transitions. True means that animation will happen.
Default: true
Events
hide
Emitted when the hidden content is hidden.
show
Emitted when the hidden content is shown.
Methods
hideMorphSection
Hides the hidden content.
Returns
MorphSection
Returns this morph section for chaining
showMorphSection
Shows the hidden content.
Returns
MorphSection
Returns this morph section for chaining
toggleMorphSection
Toggles the visibilty of the section
Returns
MorphSection
Returns this morph section for chaining
visibleshowBooleanMorphSection
Sets the visibilty of the section
Arguments
showBoolean
True means that the normally hidden content will be shown.
Returns
MorphSection
This MorphSection
visibleBoolean
Gets the visibilty of the section
Returns
Boolean
The current visibility where true means that the normally hidden content is visible.