Site-wide

Page header

Setup

This api refers to an optional element used in the page header, the page header expandable. There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init="PageHeaderExpandable" attribute to component's markup:

<div
  class="ecl-page-header-expandable"
  data-ecl-auto-init="PageHeaderExpandable"
>
  ...
</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 a class ecl-page-header-expandable on the page:

var elt = document.querySelector('.ecl-page-header-expandable');
var PageHeaderExpandable = new ECL.PageHeaderExpandable(elt);
PageHeaderExpandable.init();

Retrieve an existing instance

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

var elt = document.querySelector('.ecl-page-header-expandable');
var instance = ECL.components.get(elt);

API