<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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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 make sures 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
Playground