<div class="ecl-expandable" data-ecl-expandable="true"><button data-ecl-expandable-toggle="true"
data-ecl-label-expanded="Expanded button" data-ecl-label-collapsed="Collapsed button"
aria-controls="expandable-example-content" aria-expanded="false" type="button"
class="ecl-expandable__toggle ecl-button ecl-button--secondary"><span class="ecl-button__container"><span
class="ecl-button__label" data-ecl-label="true">Collapsed button</span><svg focusable="false" aria-hidden="true"
data-ecl-icon="true"
class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--fluid ecl-icon--rotate-180">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></span></button>
<div class="ecl-expandable__content" id="expandable-example-content" hidden="">
<p class="ecl-u-type-paragraph-m">The EU is building an energy union that ensures Europe’s energy supply is safe,
viable and accessible to all. In doing so, it can boost the economy and attract investments that can create new
jobs opportunities.</p>
</div>
</div>Try it yourself on the playground
PlaygroundJS behaviour
Auto initialisation
In order to automatically initalise the JS behaviour, add data-ecl-auto-init="Expandable" to your component's markup:
<div class="ecl-expandable" data-ecl-expandable data-ecl-auto-init="Expandable">
...
</div>
Don't forget to call ECL.autoInit() when your page is ready!
Manual initialisation
When the document is ready, query the element. For example, you can use document.querySelector('[data-ecl-expandable]') if you only have 1 expandable in the page.
Then, instantiate the Expandable component and call init():
var elt = document.querySelector('[data-ecl-expandable]');
var expandable = new ECL.Expandable(elt);
expandable.init();