ECL Expandables


1.9.02 years ago3 years agoMinified + gzip package size for @ecl/generic-component-expandable in KB



When and how to use this component

If you need to present a lot of content on a page, it can be divided into sub-sections in a structured way.

When to use this component

  • when you have a large amount of information

Do not use this component

  • as a rule avoid hiding information as much as possible


In order to automatically attach event listeners on your expandables, add the following script to your page (keep in mind that the selector is mandatory):

document.addEventListener('DOMContentLoaded', function() {

Change button label when the component is collapsed/expanded

You can attach data-label-expanded and data-label-collapsed attributes to your button. The button label will be updated dynamically according to these values. Check the first example for more information.


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.