API
Expandable
Parameters
element
HTMLElement DOM element for component instantiation and scopeoptions
Object (optional, default{}
)options.toggleSelector
String Selector for toggling element (optional, default'[data-ecl-expandable-toggle]'
)options.labelSelector
String Selector for label (optional, default'[data-ecl-label]'
)options.labelExpanded
String Label state (optional, default'data-ecl-label-expanded'
)options.labelCollapsed
String Label collapsed state (optional, default'data-ecl-label-collapsed'
)options.attachClickListener
Boolean Whether or not to bind click events on toggle (optional, defaulttrue
)
init
Initialise component.
destroy
Destroy component.
handleClickOnToggle
Toggles between collapsed/expanded states.
autoInit
Parameters
root
HTMLElement DOM element for component instantiation and scope$1
Object (optional, default{}
)$1.EXPANDABLE
(optional, default{}
)
Returns Expandable An instance of Expandable.
Setup
There are 2 ways to initialise the component.
Automatic
Add data-ecl-auto-init="Expandable"
attribute to component's markup:
<div class="ecl-expandable" data-ecl-expandable data-ecl-auto-init="Expandable">
...
</div>
Use the ECL
library's autoInit()
(ECL.autoInit()
) when your page is ready or other custom event you want to hook onto.
Manual
Get target element, create an instance and invoke init()
.
Given you have 1 element with an attribute data-ecl-expandable
on the page:
var elt = document.querySelector('[data-ecl-expandable]');
var expandable = new ECL.Expandable(elt);
expandable.init();