Responsive Timeline Generator With jQuery - Timeline

File Size: 45.5 KB
Views Total: 18897
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Timeline Generator With jQuery - Timeline

Timeline.js is a dead simple jQuery plugin which helps render a basic, responsive timeline from plain html structure.

How to use it:

1. Load the jQuery Timeline.js plugin's style sheet in the document's head section.

<link rel="stylesheet" href="timeline.css">

2. Add events or activities to the timeline.

<div id="example">
      <h1>Block 1</h1>
      <h1>Block 2</h1>
      <h1>Block 3</h1>

3. Call the function on the top element to generate a timeline on your webpage.


4. Override the default options as per your need.

  startSide: 'left',
  alternate: true,
  showDate: true,
  animate: true

Change logs:


  • Fixed: data-vtside Doesn't override


  • v2.0: rewrite.


  • Fixed multiple timeline reference bug


  • Code refactor and update to add optional dates
  • Fixed fade bug and removed console log

This awesome jQuery plugin is developed by RyanFitzgerald. For more Advanced Usages, please check the demo page or visit the official website.