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) fully accessible and 508 compliant (an original requirement) (2) simple, (3) able to handle nearly any form of content, and (4) printer friendly. As of July 2013, it also comes packed with an optional responsive stylesheet for use with mobile devices less than 480px wide. Finally, there's plenty of room for you to get creative with the styling. (Please drop me a line if you do do something cool with it.)


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

Timeliner Demo: Civil Rights Timeline


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="timelineContainer" class="timelineContainer">
	<div class="timelineMajor">
		<h2 class="timelineMajorMarker">Major Marker</h2>
		<dl class="timelineMinor">
			<dt id="event01"><a>Event</a></dt>
			<dd class="timelineEvent" id="event01EX" style="display: none; ">
				<p>Content about the event goes here.</p>
			</dd><!-- /.timelineEvent -->
		</dl><!-- /.timelineMinor -->
		<dl class="timelineMinor">
			<dt id="event02"><a>Another Event</a></dt>
			<dd class="timelineEvent" id="event02EX" style="display: none; ">
				<p>Content about the other event.</p>
			</dd><!-- /.timelineEvent -->
		</dl><!-- /.timelineMinor -->

	</div><!-- /.timelineMajor -->
</div><!-- /#timelineContainer -->


The content used in the demo is from InvestigatingPower.org, one of two initial places where I implemented timeliner. InvestigatingPower.org features a total of five timeliner-powered timelines covering the topics of McCarthyism, Civil Rights, the Vietnam War, the Watergate Scandal, Corporate Power (Tobacco), and Post 9/11.


Normally I wouldn't even bother with this kind of stuff, but someone asked, so here goes. Really all that's important to me is that you try to let me know if you implement it somewhere so I can take a peek.

Creative Commons License
Timeliner by Tarek Anandan is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

blog comments powered by Disqus

Get in Touch

Question, comment or request? Send me a note.