Expandables

API

Expandable

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options 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, default true)

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();

Retrieve an existing instance

If an existing instance needs to be updated, it can be retrieved this way:

var elt = document.querySelector('[data-ecl-expandable]');
var instance = ECL.components.get(elt);

To update an existing instance, you can run destroy() and init() on this instance, like this:

instance.destroy();
instance.init();