<div class="ecl-accordion2" data-ecl-accordion2="true">
<div class="ecl-accordion2__item">
<h3 class="ecl-accordion2__title"><button type="button" class="ecl-accordion2__toggle"
data-ecl-accordion2-toggle="true" aria-controls="accordion-example-content"><span
class="ecl-accordion2__toggle-flex"><svg focusable="false" aria-hidden="true" data-ecl-accordion2-icon="true"
class="ecl-accordion2__toggle-icon ecl-icon ecl-icon--m">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--plus"></use>
</svg><span class="ecl-accordion2__toggle-title">Delivery of last pending proposals, a common Destiny of
unity, the hour of European Democracy</span></span></button></h3>
<div class="ecl-accordion2__content" id="accordion-example-content" hidden="" role="region">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.</div>
</div>
<div class="ecl-accordion2__item">
<h3 class="ecl-accordion2__title"><button type="button" class="ecl-accordion2__toggle"
data-ecl-accordion2-toggle="true" aria-controls="accordion-example2-content"><span
class="ecl-accordion2__toggle-flex"><svg focusable="false" aria-hidden="true" data-ecl-accordion2-icon="true"
class="ecl-accordion2__toggle-icon ecl-icon ecl-icon--m">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--plus"></use>
</svg><span class="ecl-accordion2__toggle-title">Spring 2019 Economic Forecast: Growth continues at a more
moderate pace</span></span></button></h3>
<div class="ecl-accordion2__content" id="accordion-example2-content" hidden="" role="region">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.</div>
</div>
<div class="ecl-accordion2__item">
<h3 class="ecl-accordion2__title"><button type="button" class="ecl-accordion2__toggle"
data-ecl-accordion2-toggle="true" aria-controls="accordion-example3-content"><span
class="ecl-accordion2__toggle-flex"><svg focusable="false" aria-hidden="true" data-ecl-accordion2-icon="true"
class="ecl-accordion2__toggle-icon ecl-icon ecl-icon--m">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--plus"></use>
</svg><span class="ecl-accordion2__toggle-title">Delivery of last pending proposals, a common Destiny of
unity, the hour of European Democracy</span></span></button></h3>
<div class="ecl-accordion2__content" id="accordion-example3-content" hidden="" role="region">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.</div>
</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="Accordion2" to your component's markup:
<div class="ecl-accordion2" data-ecl-accordion2 data-ecl-auto-init="Accordion2">
...
</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-accordion2]') if you only have 1 accordion in the page.
Then, instantiate the Accordion2 component and call init():
var elt = document.querySelector('[data-ecl-accordion2]');
var accordion = new ECL.Accordion2(elt);
accordion.init();