Lists

API

DescriptionList

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.listsSelector String Selector for list element (optional, default '[data-ecl-description-list-collapsible]')
  • options.visibleItemsSelector String Selector to retrieve the number of visible items (optional, default 'data-ecl-description-list-visible-items')
  • options.moreItemLabelSelector String Selector for more button label attribute (optional, default 'data-ecl-description-list-more-label')
  • options.attachClickListener Boolean Whether or not to bind click events (optional, default true)

init

Initialise component.

showHide

showHide elements basing on user preference.

Parameters

• elements

destroy

Destroy component.

handleClickOnMore

Expands the list of items.

Parameters

• e Event

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

  • $1.DESCRIPTION_LIST (optional, default {})

Returns DescriptionList An instance of DescriptionList.

Setup

There are 2 ways to initialise the component.

Automatic

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

<dl
  class="ecl-description-list"
  data-ecl-description-list
  data-ecl-auto-init="DescriptionList"
>
  ...
</dl>

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-description-list on the page:

var elt = document.querySelector('[data-ecl-description-list]');
var descriptionList = new ECL.DescriptionList(elt);
descriptionList.init();