<ol class="ecl-timeline" data-ecl-auto-init="Timeline" data-ecl-timeline> <li class="ecl-timeline__item" id="ecl-timeline-item-1120056106"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">1995 - 1996</div> <div class="ecl-timeline__title">Item title</div> <div class="ecl-timeline__content">President Juncker's State of the Union speech</div> </div> </li> <li class="ecl-timeline__item" id="ecl-timeline-item-70905185"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">1996 - 1997</div> <div class="ecl-timeline__content">Informal Digital Summit, Tallinn</div> </div> </li> <li class="ecl-timeline__item" id="ecl-timeline-item-1796503387"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">1997 - 1998</div> <div class="ecl-timeline__content">Strengthening European identity through education and culture: European Commission's contribution to the Leaders' meeting, Gothenburg, Sweden</div> </div> </li> <li class="ecl-timeline__item" id="ecl-timeline-item-1507404909"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">1998 - 1999</div> <div class="ecl-timeline__content"><a href="/example" class="ecl-link">Social Summit in Gothenburg, Sweden</a> </div> </div> </li> <li class="ecl-timeline__item" id="ecl-timeline-item-1353416132"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">1999 - 2000</div> <div class="ecl-timeline__content">Economic and Monetary Union package of proposals</div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-2131625452"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2000 - 2001</div> <div class="ecl-timeline__content">EU Leaders' meeting on migration, Brussels</div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-514316642"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2001 - 2002</div> <div class="ecl-timeline__content"><a href="/example" class="ecl-link">Euro Summit</a></div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-1523975798"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2002 - 2003</div> <div class="ecl-timeline__content">EU-Western Balkans Strategy</div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-1048473588"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2003 - 2004</div> <div class="ecl-timeline__content">Multiannual Financial Framework and institutional issues enhancing efficiency at the helm of the European Union</div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-803838102"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2004 - 2005</div> <div class="ecl-timeline__content">Informal European Council</div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-1512969623"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2005 - 2006</div> <div class="ecl-timeline__content">European Council</div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-2147008788"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2006 - 2007</div> <div class="ecl-timeline__content"><a href="/example" class="ecl-link">Commission proposal: Long-term budget post-2020</a></div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-398819172"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2007 - 2008</div> <div class="ecl-timeline__content">European Commission’s contribution to the Informal Leaders' meeting, Sofia, Bulgaria (16 May 2018)</div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--collapsed" id="ecl-timeline-item-1069772975"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2008 - 2009</div> <div class="ecl-timeline__content">EU-Western Balkans Summit (Sofia, Bulgaria)</div> </div> </li> <li class="ecl-timeline__item ecl-timeline__item--toggle"><button class="ecl-button ecl-button--secondary ecl-timeline__toggle" type="button" data-ecl-timeline-button data-ecl-label-collapsed="Show %d more items" data-ecl-label-expanded="Hide %d items"><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Show %d more items</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use> </svg></span></button></li> <li class="ecl-timeline__item" id="ecl-timeline-item-1309583308"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2009 - 2010</div> <div class="ecl-timeline__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> </div> </li> <li class="ecl-timeline__item" id="ecl-timeline-item-1921914886"> <div class="ecl-timeline__tooltip"> <div class="ecl-timeline__tooltip-arrow"></div> <div class="ecl-timeline__label">2010 -2011</div> <div class="ecl-timeline__content">European Semester: European Commission publishes economic policy guidance for Member States</div> </div> </li> </ol>
Try it yourself on the playground
Playground