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 fully accessible and simple, able to handle nearly any form of content, and printer friendly. There's also plenty of room for you to get creative with the styling.
Requirements
- jQuery
- Optional: Jack Moore's ColorBox jQuery plugin
A simple timeline, with only one major marker and one event would look like this:
<div id="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 -->
</div><!-- /.timelineMajor -->
</div><!-- /#timelineContainer -->Timeliner by Tarek Anandan
View Demo
Download Timeliner.js
