### OVERVIEW ###
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. There's also plenty of room for you to get creative with the styling. (Please drop me a line if you do do something cool with it.)

Other, more complex timeline plugins are available. If your needs are far greater than those provided here, consider one of the following:
https://github.com/VeriteCo/Timeline
http://www.csslab.cl/2011/08/18/jquery-timelinr/
http://timeglider.com/jquery/


### REQUIREMENTS ###
-jQuery
-Optional: Jack Moore's ColorBox jQuery plugin

### USAGE ###
1. Include screen.css and timeliner.js (or timeliner.min.js).

2. Wrap your timeline in an element with an ID of timelineContainer (e.g., <div id="timelineContainer">); You can set your own container using the plugin's options

3. Separate the major marker content (e.g., content for each century, year, decade etc) into elements with a class of timelineMajor (e.g., <div class="timelineMajor">)

4. Wrap the major markers in an element with a class of 'timelineMajorMarker' (e.g., <h2 class="timelineMajorMarker">1954</h2>)

5. Separate the individual events into DL elements with a class of timelineMinor (e.g., <dl class="timelineMinor">)

6. Wrap the title of the individual events in a DT and A tag; give each DT a unique ID (e.g., <dt id="19540517"><a>Brown vs Board of Education</a></dt>)

7. Wrap the (hidden) content of each event in a DL tag; give each DL an ID based on the DT with 'EX' appended, a class of 'timeline', and set the display to 'none' (e.g., <dd class="timelineEvent" id="19540517EX" style="display: none; ">)

8. Instantiate:

	$.timeliner();

Or, with instantiate with options:

	$.timeliner({
		timelineContainer: '#timelineContainer', // value: selector of the main element holding the timeline's content, default to #timelineContainer
		startState: 'closed', // value: closed | open, default to closed; determines whether the timeline is initially collapsed or fully expanded
		baseSpeed: 200 // value: any integer, default to 200; determines the base speed, some animations are a multiple (4x) of the base speed
	});

9. Optional: Add an expand/collapse all events by adding the following inside of the main #timelineContainer:

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

### SAMPLE ###

A 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 -->

### DEMO ###
http://www.technotarek.com/timeliner/timeliner.html

### ADDITIIONAL EXAMPLES ###
http://www.ncld-youth.info/index.php?id=61
http://www.investigatingpower.org/timelines/mccarthyism/

### CREDITS ###
The content used in the repo and in the demo is from the Investigating Power project (http://www.investigatingpower.org), a website which I developed on behalf of author and journalist Charles Lewis.

The repo is packaged with a version of Jack Moore's ColorBox jQuery plugin (http://www.jacklmoore.com/colorbox). It is for demonstration purposes only. See https://github.com/jackmoore/colorbox for support.

### LICENSE ###
Timeliner by Tarek Anandan is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. 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.