@ec-europa/ecl-expandables

ECL Expandables

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
628Jun 21, 2021Jan 30, 2017Minified + gzip package size for @ec-europa/ecl-expandables in KB

Readme

Expandables

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

Implementation

In order to automatically attach event listeners on your expandables, add the following script to your page:

document.addEventListener('DOMContentLoaded', function() {
  ECL.initExpandables();
});

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.

Resources

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.