<ol data-ecl-auto-init="Timeline2" class="ecl-timeline2" data-ecl-timeline="true">
<li class="ecl-timeline2__item">
<div class="ecl-timeline2__label">13 September 2017</div>
<div class="ecl-timeline2__title">Item title</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">President Juncker's State of the Union
speech</a></div>
</li>
<li class="ecl-timeline2__item">
<div class="ecl-timeline2__label">28-29 September 2017</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Informal Digital Summit, Tallinn</a></div>
</li>
<li class="ecl-timeline2__item">
<div class="ecl-timeline2__label">14 November 2017</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Strengthening European identity through
education and culture: European Commission's contribution to the Leaders' meeting, Gothenburg,
Sweden</a></div>
</li>
<li class="ecl-timeline2__item">
<div class="ecl-timeline2__label">17 November 2017</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Social Summit in Gothenburg, Sweden</a>
</div>
</li>
<li class="ecl-timeline2__item">
<div class="ecl-timeline2__label">6 December 2017</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Economic and Monetary Union package of
proposals</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">14-15 December 2017</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">EU Leaders' meeting on migration,
Brussels</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">15 December 2017</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Euro Summit</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">6 February 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">EU-Western Balkans Strategy</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">14 February 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Multiannual Financial Framework</a> and <a
href="/example" class="ecl-link">institutional issues</a> - enhancing efficiency at the helm of the European
Union</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">23 February 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Informal European Council</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">22-23 March 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">European Council</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">2 May 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Commission proposal: Long-term budget
post-2020</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">15 May 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">European Commission’s contribution to the
Informal Leaders' meeting</a>, Sofia, Bulgaria (16 May 2018)</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">17 May 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">EU-Western Balkans Summit</a> (Sofia,
Bulgaria)</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">23 May 2018</div>
<div class="ecl-timeline2__content">Progress by Member States in meeting the conditions for adopting the euro - <a
href="/example" class="ecl-link">reports</a> by the European Commission and ECB</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">23 May 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">European Semester</a>: European Commission
publishes economic policy guidance for Member States</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">29 May - 14 June 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">EU budget for the future</a>: European
Commission's legislative proposals for spending programmes</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">28-29 June 2018</div>
<div class="ecl-timeline2__content">Commission contribution to the European Council: <a href="/example"
class="ecl-link">Economic and Monetary Union, migration, EU budget for the future</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">10 July 2018</div>
<div class="ecl-timeline2__content">Ways to enhance subsidiarity, proportionality and better regulation in the daily
operations of the EU: <a href="/example" class="ecl-link">Report</a> by the Task Force chaired by Commission First
Vice-President Timmermans</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">12 September 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">President Juncker's State of the Union
speech</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">20 September 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">Informal European Council/Meeting of EU27
(Salzburg, Austria)</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">18 October 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">European Council meeting</a>, Brussels</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">21 November 2018</div>
<div class="ecl-timeline2__content"><a href="/example" class="ecl-link">European Semester</a>: setting the economic
and social priorities</div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">28 November 2018</div>
<div class="ecl-timeline2__content">Commission contribution to the European Council on <a href="/example"
class="ecl-link">Capital Markets Union and Banking Union</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">04 December 2018</div>
<div class="ecl-timeline2__content">Commission contribution to the European Council on <a href="/example"
class="ecl-link">long-term EU budget</a> and <a href="/example" class="ecl-link">migration</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">05 December 2018</div>
<div class="ecl-timeline2__content">Commission contribution to the European Council on the <a href="/example"
class="ecl-link">international role of the euro</a> and the <a href="/example" class="ecl-link">Action Plan on
disinformation</a></div>
</li>
<li class="ecl-timeline2__item--collapsed ecl-timeline2__item">
<div class="ecl-timeline2__label">11 December 2018</div>
<div class="ecl-timeline2__content">Commission contribution to the European Council on the <a href="/example"
class="ecl-link">Citizens' Dialogues</a></div>
</li>
<li class="ecl-timeline2__item ecl-timeline2__item--toggle"><button data-ecl-timeline-button="true"
data-ecl-label-collapsed="Show 22 more items" data-ecl-label-expanded="Hide 22 items" type="button"
class="ecl-timeline2__toggle ecl-button ecl-button--secondary"><span class="ecl-button__container"><span
class="ecl-button__label" data-ecl-label="true">Show 22 more items</span><svg focusable="false"
aria-hidden="true" data-ecl-icon="true"
class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--xs ecl-icon--rotate-180">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
</svg></span></button></li>
<li class="ecl-timeline2__item">
<div class="ecl-timeline2__label">11 December 2018</div>
<div class="ecl-timeline2__content">Commission contribution to the <a href="/example" class="ecl-link">Euro
Summit</a></div>
</li>
<li class="ecl-timeline2__item">
<div class="ecl-timeline2__label">13-14 December 2018</div>
<div class="ecl-timeline2__title">Item title</div>
<div class="ecl-timeline2__content">European Council and Euro Summit</div>
</li>
</ol>Try it yourself on the playground
PlaygroundJS behaviour
Auto initialisation
In order to automatically initalise the JS behaviour, add data-ecl-auto-init="Timeline2" to your component's markup:
<ol
class="ecl-timeline2"
data-ecl-timeline="true"
data-ecl-auto-init="Timeline2"
>
...
</ol>
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-timeline2]') if you only have 1 timeline in the page.
Then, instantiate the Timeline2 component and call init():
var elt = document.querySelector('[data-ecl-timeline2]');
var timeline2 = new ECL.Timeline2(elt);
timeline2.init();