ECL playground
Expandable
Usage: https://ec.europa.eu/component-library/eu/components/expandable/usage/
You need to translate the text in the code line number 5, 6 and 9 with the translations below:
| EN | FR | DE |
|---|---|---|
| Read more | Afficher plus | Mehr |
| Less | Moins | Weniger |
The identifier in the code line number 3 and 15 is the id of the element to be expanded or collapsed. It must be unique within the web page.
Code:
<div class="ecl-expandable"
data-ecl-auto-init="Expandable" data-ecl-expandable="true">
<button aria-controls="expandable-example-content" aria-expanded="false"
class="ecl-button ecl-button--secondary ecl-expandable__toggle" data-ecl-expandable-toggle=""
data-ecl-label-collapsed="Read more"
data-ecl-label-expanded="Less"
type="button">
<span class="ecl-button__container">
<span class="ecl-button__label" data-ecl-label="true">Read more</span>
<svg aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
data-ecl-icon="" focusable="false">
<use xlink:href="/eurostat/o/estat-theme/images/icons/sprites/icons.svg#corner-arrow"></use>
</svg></span></button>
<div class="ecl-expandable__content" hidden="" id="expandable-example-content">
<p class="ecl-u-type-paragraph">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>
Demo:
Accordion
Usage: https://ec.europa.eu/component-library/eu/components/accordion/usage/
You need to translate the text line number 9, 10 and 14 in the code with the translations below:
| EN | FR | DE |
|---|---|---|
| Open | Ouvrir | Öffnen |
| Close | Fermer | Schließen |
The identifier in the code line number 6 and 22 is the id of the element to be expanded or collapsed. It must be unique within the web page.
Code:
<div class="ecl-accordion"
data-ecl-accordion="" data-ecl-auto-init="Accordion">
<div class="ecl-accordion__item">
<h3 class="ecl-accordion__title">
<button
aria-controls="accordion-example-content1"
class="ecl-accordion__toggle"
data-ecl-accordion-toggle=""
data-ecl-label-collapsed="Open"
data-ecl-label-expanded="Close"
type="button">
<span class="ecl-accordion__toggle-flex">
<span class="ecl-accordion__toggle-indicator">
<span class="ecl-accordion__toggle-label">Open</span>
<svg aria-hidden="true"
class="ecl-icon ecl-icon--m ecl-accordion__toggle-icon" data-ecl-accordion-icon=""
focusable="false">
<use xlink:href="/eurostat/o/estat-theme/images/icons/sprites/icons.svg#corner-arrow"></use>
</svg></span><span class="ecl-accordion__toggle-title">Delivery of last pending proposals, a
common Destiny of unity, the hour of European Democracy</span></span></button></h3>
<div class="ecl-accordion__content" hidden=""
id="accordion-example-content1"
role="region">
<p class="ecl-u-type-paragraph">The College of Commissioners held today the first
weekly meeting of 2019 which was devoted to discussing the challenges of this new year. Commissioners
used the opportunity to take stock and discuss the year ahead, including the European elections in May
and other important milestones ahead.</p>
</div>
</div>
<div class="ecl-accordion__item">
<h3 class="ecl-accordion__title">
<button
aria-controls="accordion-example-content2"
class="ecl-accordion__toggle"
data-ecl-accordion-toggle=""
data-ecl-label-collapsed="Open"
data-ecl-label-expanded="Close"
type="button">
<span class="ecl-accordion__toggle-flex">
<span class="ecl-accordion__toggle-indicator">
<span class="ecl-accordion__toggle-label">Open</span>
<svg aria-hidden="true"
class="ecl-icon ecl-icon--m ecl-accordion__toggle-icon" data-ecl-accordion-icon=""
focusable="false">
<use xlink:href="/eurostat/o/estat-theme/images/icons/sprites/icons.svg#corner-arrow"></use>
</svg></span><span class="ecl-accordion__toggle-title">Delivery of last pending proposals, a
common Destiny of unity, the hour of European Democracy</span></span></button></h3>
<div class="ecl-accordion__content" hidden=""
id="accordion-example-content2"
role="region">
<p class="ecl-u-type-paragraph">The European economy is forecast to continue
expanding for the seventh year in a row in 2019, with real GDP expected to grow in all EU Member States.
As global uncertainties continue to weigh, domestic dynamics are set to support the European economy.
Growth is expected to gather pace again next year.</p>
</div>
</div>
<div class="ecl-accordion__item">
<h3 class="ecl-accordion__title">
<button
aria-controls="accordion-example-content3"
class="ecl-accordion__toggle"
data-ecl-accordion-toggle=""
data-ecl-label-collapsed="Open"
data-ecl-label-expanded="Close"
type="button">
<span class="ecl-accordion__toggle-flex">
<span class="ecl-accordion__toggle-indicator">
<span class="ecl-accordion__toggle-label">Open</span>
<svg aria-hidden="true"
class="ecl-icon ecl-icon--m ecl-accordion__toggle-icon" data-ecl-accordion-icon=""
focusable="false">
<use xlink:href="/eurostat/o/estat-theme/images/icons/sprites/icons.svg#corner-arrow"></use>
</svg></span><span class="ecl-accordion__toggle-title">Delivery of last pending proposals, a
common Destiny of unity, the hour of European Democracy</span></span></button></h3>
<div class="ecl-accordion__content" hidden=""
id="accordion-example-content3"
role="region">
<p class="ecl-u-type-paragraph">In the modern global economy trade is essential for
growth, jobs and competiveness, and the EU is committed to maintaining an open and rules-based trading
system. With the rising threat of protectionism and weakened commitment of large players to global trade
governance, the EU must take the lead.</p>
</div>
</div>
</div>
Demo:
The College of Commissioners held today the first weekly meeting of 2019 which was devoted to discussing the challenges of this new year. Commissioners used the opportunity to take stock and discuss the year ahead, including the European elections in May and other important milestones ahead.
The European economy is forecast to continue expanding for the seventh year in a row in 2019, with real GDP expected to grow in all EU Member States. As global uncertainties continue to weigh, domestic dynamics are set to support the European economy. Growth is expected to gather pace again next year.
In the modern global economy trade is essential for growth, jobs and competiveness, and the EU is committed to maintaining an open and rules-based trading system. With the rising threat of protectionism and weakened commitment of large players to global trade governance, the EU must take the lead.