Create a vertical timeline based on a list of dates and events
CSS
Permalink
Failed to load latest commit information.
.gitignore
jquery-vertical-timeline.js
jqvt_default.css initial commit; version 0.5b Oct 22, 2011
readme.md minor formatting change to readme May 20, 2016

readme.md

Version 0.5b GitHub issues jQuery 1.6.4

jQuery Vertical Timelines

This plugin turns ordinary definition lists into smooth, interactive, vertical timelines.

Usage Instructions

Create your timeline using a standard <dl>, with the dates stored in the <dt> tags and any content associated with them stored in the following <dd> tag.

Example:
<dl>
    <dt>1589-1591</dt>
    <dd><em>The Two Gentlemen of Verona</em></dd>
    <dt>1590-1594</dt>
    <dd><em>The Taming of the Shrew</em></dd>
    <dt>1590-1591</dt>
    <dd><em>Henry VI, Part 2</em></dd>
    <dt>1590-1591</dt>
    <dd><em>Henry VI, Part 3</em></dd>
    ...
</dl>

Next, simply initialize the timeline by calling the plugin. This will add style and functionality to the timeline.

$('dl').verticalTimeline();

Demo

The demo uses the timeline of plays by Shakespeare as described on Wikipedia.

Change Log

Version 0.5b (2011/10/21); Initial release Basic styling included Some items configurable