animation imageanimation imageanimation image

Timeliner.js - A jQuery plugin for making simple historical timelines

Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it's (1) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML.



The "Future" theme demo shows some of the possibilities of using your own custom CSS.

Into the Future


The original demo features two working examples, which show several key features including expand/collapse, autostart/autoload, and multiple timelines per page.

Original Demo


Timeliner.js was first implemented on

McCarthyism | Civil Rights | Vietnam | Watergate | Corporate Power | Post 9/11



Get the latest version, as well as full usage instructions, from my Timeliner GitHub repo. Fork away.



A timeline with only one major marker and two events would look like this:

<div id="timeline" class="timeline-container">
	<div class="timeline-wrapper">
		<h2 class="timeline-time">1976</h2>
		<dl class="timeline-series">
			<dt class="timeline-event" id="event01"><a>Event</a></dt>
			<dd class="timeline-event-content" id="event01EX">
				<p>Content about the event goes here.</p>
			<dt class="timeline-event" id="event02"><a>Another Event</a></dt>
			<dd class="timeline-event-content" id="event02EX">
				<p>Content about the other event.</p>




The content used in the original demo is from, one of two initial places where I implemented timeliner. 



The original 1.0 version was also fully accessible and 508 compliant as of its original production (mid-2000s). Accessibility technologies have since changed as have coding practices to address accessibility (e.g., the adoption of ARIA). It is recommended that you review your own implementation to ensure accessiblity if that is a requirement of your project. I hope to re-review and update the plugin's native accessiblity at a later date.



What's most important to me is that you try to let me know if you implement it somewhere so I can take a peek.


Timeliner by Tarek Anandan, version 2.x+, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Timeliner.js, version 1.x, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

blog comments powered by Disqus

Get in Touch