degliwe/timeline-demo.html

## timeline-demo.html
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <title>demo timeline</title>


  <link rel='stylesheet' href='https://unpkg.com/@ecl/ec-preset-full@2.1.0/dist/styles/ecl-ec-preset-full.css'>

      <style>
      #collapse-toggle, #expand-toggle{
  display:none;
}

#expand-toggle:checked ~ * #expand-btn{
    display:none;
}
#expand-toggle:checked ~ * .ecl-timeline__item--collapsed {
    display:list-item;
}

#collapse-toggle:checked ~ * #collapse-btn{
    display:none;
}
#collapse-toggle:checked ~ * .ecl-timeline__item--collapsed {
    display:none;
}
    </style>


</head>

<body translate="no" >

  <input type="radio" name="timeline" id="collapse-toggle" checked/>
<input type="radio" name="timeline" id="expand-toggle" />

<h1 class="ecl-u-type-heading-1">My long page</h1>

<h2 class="ecl-u-type-heading-2">Chapter 1</h2>
<p class="ecl-u-type-paragraph">
  The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
</p>

<ol class="ecl-timeline" data-ecl-timeline="true">
  <li class="ecl-timeline__item">
    <div class="ecl-timeline__label">2018</div>
    <div class="ecl-timeline__content">The EU in brief, institutions and bodies, countries, symbols, history, facts and
      figures</div>
  </li>
  <li class="ecl-timeline__item">
    <div class="ecl-timeline__label">2017</div>
    <div class="ecl-timeline__content">Information on agriculture, business, culture, health, etc.</div>
  </li>
  <li class="ecl-timeline__item">
    <div class="ecl-timeline__label">2016</div>
    <div class="ecl-timeline__content">Information on your rights to live, work, travel and study in another EU
      country, including access to healthcare and consumer rights</div>
  </li>
  <li class="ecl-timeline__item ecl-timeline__item--toggle">
    <label data-ecl-timeline-button="true" type="button" class="ecl-timeline__button ecl-button ecl-button--call" for="expand-toggle" id="expand-btn">
      Show all</label>
  </li>
  <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2015</div>
    <div class="ecl-timeline__content">Information on taxes, customs, importing and exporting goods, financial support
      for businesses</div>
  </li>
  <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2014</div>
    <div class="ecl-timeline__content">Find EU treaties, legislation, case-law, how EU law is made and applied</div>
  </li>
  <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2013</div>
    <div class="ecl-timeline__content">Find official documents, publications, statistics, open data and more resources</div>
  </li>
    <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2015</div>
    <div class="ecl-timeline__content">Information on taxes, customs, importing and exporting goods, financial support
      for businesses</div>
  </li>
  <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2014</div>
    <div class="ecl-timeline__content">Find EU treaties, legislation, case-law, how EU law is made and applied</div>
  </li>
  <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2013</div>
    <div class="ecl-timeline__content">Find official documents, publications, statistics, open data and more resources</div>
  </li>
    <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2015</div>
    <div class="ecl-timeline__content">Information on taxes, customs, importing and exporting goods, financial support
      for businesses</div>
  </li>
  <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2014</div>
    <div class="ecl-timeline__content">Find EU treaties, legislation, case-law, how EU law is made and applied</div>
  </li>
  <li class="ecl-timeline__item--collapsed ecl-timeline__item">
    <div class="ecl-timeline__label">2013</div>
    <div class="ecl-timeline__content">Find official documents, publications, statistics, open data and more resources</div>
  </li>
  <li class="ecl-timeline__item ecl-timeline__item--toggle">
    <label data-ecl-timeline-button="true" type="button" class="ecl-timeline__button ecl-button ecl-button--call" for="collapse-toggle" id="collapse-btn">
      Hide all</label>
  </li>
</ol>

<h2 class="ecl-u-type-heading-2">Chapter 2</h2>
<p class="ecl-u-type-paragraph">
  The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
</p>

<h2 class="ecl-u-type-heading-2">Chapter 3</h2>
<p class="ecl-u-type-paragraph">
  The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
</p>

<h2 class="ecl-u-type-heading-2">Chapter 4</h2>
<p class="ecl-u-type-paragraph">
  The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
</p>

<h2 class="ecl-u-type-heading-2">Chapter 5</h2>
<p class="ecl-u-type-paragraph">
  The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
</p>

<h2 class="ecl-u-type-heading-2">Chapter 6</h2>
<p class="ecl-u-type-paragraph">
  The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
</p>

<h2 class="ecl-u-type-heading-2">Chapter 7</h2>
<p class="ecl-u-type-paragraph">
  The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
</p>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en" >

	<head>

	<meta charset="UTF-8">
	<title>demo timeline</title>



	<link rel='stylesheet' href='https://unpkg.com/@ecl/ec-preset-full@2.1.0/dist/styles/ecl-ec-preset-full.css'>

	<style>
	#collapse-toggle, #expand-toggle{
	display:none;
	}

	#expand-toggle:checked ~ * #expand-btn{
	display:none;
	}
	#expand-toggle:checked ~ * .ecl-timeline__item--collapsed {
	display:list-item;
	}

	#collapse-toggle:checked ~ * #collapse-btn{
	display:none;
	}
	#collapse-toggle:checked ~ * .ecl-timeline__item--collapsed {
	display:none;
	}
	</style>






	</head>

	<body translate="no" >

	<input type="radio" name="timeline" id="collapse-toggle" checked/>
	<input type="radio" name="timeline" id="expand-toggle" />

	<h1 class="ecl-u-type-heading-1">My long page</h1>

	<h2 class="ecl-u-type-heading-2">Chapter 1</h2>
	<p class="ecl-u-type-paragraph">
	The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
	</p>

	<ol class="ecl-timeline" data-ecl-timeline="true">
	<li class="ecl-timeline__item">
	<div class="ecl-timeline__label">2018</div>
	<div class="ecl-timeline__content">The EU in brief, institutions and bodies, countries, symbols, history, facts and
	figures</div>
	</li>
	<li class="ecl-timeline__item">
	<div class="ecl-timeline__label">2017</div>
	<div class="ecl-timeline__content">Information on agriculture, business, culture, health, etc.</div>
	</li>
	<li class="ecl-timeline__item">
	<div class="ecl-timeline__label">2016</div>
	<div class="ecl-timeline__content">Information on your rights to live, work, travel and study in another EU
	country, including access to healthcare and consumer rights</div>
	</li>
	<li class="ecl-timeline__item ecl-timeline__item--toggle">
	<label data-ecl-timeline-button="true" type="button" class="ecl-timeline__button ecl-button ecl-button--call" for="expand-toggle" id="expand-btn">
	Show all</label>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2015</div>
	<div class="ecl-timeline__content">Information on taxes, customs, importing and exporting goods, financial support
	for businesses</div>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2014</div>
	<div class="ecl-timeline__content">Find EU treaties, legislation, case-law, how EU law is made and applied</div>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2013</div>
	<div class="ecl-timeline__content">Find official documents, publications, statistics, open data and more resources</div>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2015</div>
	<div class="ecl-timeline__content">Information on taxes, customs, importing and exporting goods, financial support
	for businesses</div>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2014</div>
	<div class="ecl-timeline__content">Find EU treaties, legislation, case-law, how EU law is made and applied</div>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2013</div>
	<div class="ecl-timeline__content">Find official documents, publications, statistics, open data and more resources</div>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2015</div>
	<div class="ecl-timeline__content">Information on taxes, customs, importing and exporting goods, financial support
	for businesses</div>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2014</div>
	<div class="ecl-timeline__content">Find EU treaties, legislation, case-law, how EU law is made and applied</div>
	</li>
	<li class="ecl-timeline__item--collapsed ecl-timeline__item">
	<div class="ecl-timeline__label">2013</div>
	<div class="ecl-timeline__content">Find official documents, publications, statistics, open data and more resources</div>
	</li>
	<li class="ecl-timeline__item ecl-timeline__item--toggle">
	<label data-ecl-timeline-button="true" type="button" class="ecl-timeline__button ecl-button ecl-button--call" for="collapse-toggle" id="collapse-btn">
	Hide all</label>
	</li>
	</ol>

	<h2 class="ecl-u-type-heading-2">Chapter 2</h2>
	<p class="ecl-u-type-paragraph">
	The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
	</p>

	<h2 class="ecl-u-type-heading-2">Chapter 3</h2>
	<p class="ecl-u-type-paragraph">
	The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
	</p>

	<h2 class="ecl-u-type-heading-2">Chapter 4</h2>
	<p class="ecl-u-type-paragraph">
	The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
	</p>

	<h2 class="ecl-u-type-heading-2">Chapter 5</h2>
	<p class="ecl-u-type-paragraph">
	The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
	</p>

	<h2 class="ecl-u-type-heading-2">Chapter 6</h2>
	<p class="ecl-u-type-paragraph">
	The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
	</p>

	<h2 class="ecl-u-type-heading-2">Chapter 7</h2>
	<p class="ecl-u-type-paragraph">
	The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others. The Commission is putting forward modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to Europeans.
	</p>







	</body>
	</html>