Interactive & Accessible jQuery Timeline Plugin - Timeliner

Timeliner is another jQuery plugin for creating a fully accessible, interactive, printer friendly and responsive timeline that's able to handle nearly any form of Html content.

Features:

• Simple and easy to implement.
• Responsive design for mobile devices.
• Multiple timelines on one page.
• Expandable/collapsible timeline items.
• Auto start and auto load support.

How to use it:

1. Include jQuery library and jQuery timeliner plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/timeliner.min.js"></script>

2. Include optional jQuery colorbox for image lightbox support.

<link rel="stylesheet" href="inc/colorbox.css" type="text/css" media="screen">
<script type="text/javascript" src="inc/colorbox.js"></script>

3. Include required CSS files in the head section of the document.

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">

4. Create the content for the timeline following the Html structure:

<div id="timelineContainer" class="timelineContainer">

<div class="timelineToggle">
<p><a class="expandAll">+ expand all</a></p>
</div>
<br class="clear">

<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>
</dl>
<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>
</dl>
</div>

...

</div>

5. Initialize the timeline.

<script>
$(document).ready(function() {
$.timeliner();
});
</script>

6. Available plugin options.

$.timeliner({

  // value: selector of the main element holding the timeline's content
  timelineContainer: '#timeline', 

  // value: class selector
  // Wrapper that contains items under a specific marker (e.g., all of the events under a year on the timeline)
  timelineSection: '.timeline-wrapper',

  // value: class selector
  // Class selector applied to each major item on the timeline, such as each year
  timelineSectionMarker: '.timeline-time',
  
  // value: selector
  // Class assigned to wrappers surrounding each individual event
  timelineTriggerContainer: '.timeline-series',
  
  // value: class selector
  // Element that is wrapped around the event's title; when clicked, expands the event and reveals its full contents
  timelineTriggerAnchor: '.timeline-event',
  

  // value: tag or class selector
  // Wrapper surrounding a series of events corresponding to the timelineSectionMarker
  timelineEventContainer: options['timelineEventContainer'] || 'dt',

  // value: class selector
  // Element that contains the event's full content to be displayed when event is expanded, an event's expanded ID should alway be on this item
  timelineEXContent: '.timeline-event-content',
  
  // value: string
  // ID suffix to identify expanded (aka EX) content
  EXContentIdSuffix: 'EX',
  
  // value: true | false
  // sets whether only one item on the timeline can be open at a time. 
  // If true, other items will close when one is opened.
  oneOpen: false,
  
  // value: closed | open
  // determines whether the timeline is initially collapsed or fully expanded
  startState: 'closed', 

  // value: array of IDs of single timelineEvents
  // determines the minor event that you want to display open by default on page load
  startOpen: [], 

  // value: any integer
  // determines the base speed, some animations are a multiple (4x) of the base speed
  baseSpeed: 200, 

  // value: numeric
  // a multiplier applied to the base speed that sets the speed at which an event's conents are displayed and hidden
  speed: 4, 

  // value: any valid CSS font-size value
  // sets the font size of an event after it is opened
  fontOpen: '1.2em', 

  // value: any valid CSS font-size value
  // sets the font size of an event after it is closed
  fontClosed: '1em', 

  // value: string
  expandAllText: '+ expand all', 

  // value: string
  collapseAllText: '- collapse all' 

});

Changelog:

2018-03-23

• CSS update

2016-05-19

• Add clearfix to css

2016-05-14

• Fixed: Clicking on title at open timeline content, title gets bigger, closing follows on second click

2014-10-14

• Fixed youtube refs

2014-10-13

• Bug fixes

2014-10-12

• First version of Future theme demo; 
• Added Venobox modal plugin (to replace Colorbox)

2014-10-11

• Separated demo and plugin css; added minified plugin css; 
• Revised semantic naming defaults; added additional tag/class customizations;

---

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