Timeliner.js v1.4 w/ jQuery 1.9.1
HTML
<div id="timelineContainer">
<div class="timelineToggle"><p><a class="expandAll">+ expand all</a></p></div>
<div class="timelineMajor">
<h2 class="timelineMajorMarker">2013</h2>
<dl class="timelineMinor">
<dt id="event01"><a>Solta Acquires Sound Surgical Technologies</a></dt>
<dd class="timelineEvent" id="event01EX" style="display: none; ">
<p>February, 2013 - Solta acquires privately-held Sound Surgical Technologies, adding complementary surgical and non-invasive product lines to Solta’s broad portfolio of leading aesthetic brands. Surgical body contouring products include the popular VASERlipo™ system, which uses ultrasound waves to selectively emulsify fatty tissue prior to extraction from the body. VASERsmooth™, PowerX®, VentX® and Origins round out the surgical brand offerings, while VASERshape™, a non-invasive approach to reduce cellulite, rounds out the array of aesthetic body treatments. </p>
</dd><!-- /.timelineEvent -->
</dl><!-- /.timelineMinor -->
<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><!-- /.timelineEvent -->
</dl><!-- /.timelineMinor -->
</div><!-- /.timelineMajor -->
</div><!-- /#timelineContainer -->
CSS
/* =============== SITE CSS =============== */
body {
background-color:#2f2f2f;
color:#eeefef;
font-size:62.5%;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
.container {
width:940px;
margin-left:auto;
margin-right:auto;
padding:10px;
*zoom:1;
}
h1 {
clear:left;
color:#7DBADF;
font-family:Palatino,"Times New Roman", Times, serif;
font-size:36px;
font-weight:400;
margin:0;
}
h2 {
font-family:Palatino,"Times New Roman", Times, serif;
font-size:22px;
font-weight:400;
margin:5px 0;
letter-spacing:.1em;
}
h3 {
font-size:1.6em;
margin:10px 0 10px 10px;
}
a:link,a:visited {
color:#7097af;
text-decoration:none;
}
a:hover {
color:#7DBADF;
}
a img {
border:none;
}
p {
margin:0 0 10px 8px;
font-size:1.3em;
font-family:Arial, Helvetica, sans-serif;
font-weight:400;
line-height:1.6em;
}
.clear {
clear:both;
line-height:0;
font-size:0;
}
/* ============ TIMELINE ============= */
div#timelineContainer {
border-left:2px solid #ccc;
margin:20px auto;
width:900px;
}
div.timelineToggle {
float:right;
margin-right:0;
white-space:nowrap;
}
a.expandAll {
color:#ccc!important;
cursor:pointer;
background:#000;
border:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-size:12px;
padding:3px 5px;
}
a.expandAll:hover {
border:none!important;
color:#7DBADF!important;
cursor:pointer;
}
div.timelineMajor {
clear:left;
float:left;
margin:0 0 12px;
width:900px;
}
.timelineMajor h2 {
background:url(../images/timeline_century_tick.gif) left center no-repeat;
color:#7097AF!important;
cursor: pointer;
font-family:Palatino,"Times New Roman", Times, serif;
font-size:3em!important;
font-weight:400!important;
margin:0 0 10px!important;
padding:4px 4px 4px 20px!important;
}
.timelineMajor h2 span...
JavaScript
/*
* Timeliner.js
* @version 1.4
* @copyright Tarek Anandan (http://www.technotarek.com)
*/
;(function(e){var t;e.timeliner=function(n){t=jQuery.extend({timelineContainer:"#timelineContainer",startState:"closed",startOpen:"",baseSpeed:200,speed:4,fontOpen:"1.2em",fontClosed:"1em",expandAllText:"+ expand all",collapseAllText:"- collapse all"},n);e(document).ready(function(){function n(n,r){e(n).removeClass("closed").addClass("open").animate({fontSize:t.fontOpen},t.baseSpeed);e(r).show(t.speed*t.baseSpeed)}function r(n,r){e(n).animate({fontSize:t.fontClosed},0).removeClass("open").addClass("closed");e(r).hide(t.speed*t.baseSpeed)}if(t.startState==="closed"){e(".timelineEvent").hide();n(e(t.startOpen).parent(".timelineMinor").find("dt a"),e(t.startOpen))}else{n(e(".timelineMinor dt, .timelineMinor dt a"),e(".timelineEvent"))}e(".timelineMinor dt").click(function(){var t=e(this).attr("id");if(e(this).find("a").is(".open")){r(e("a",this),e("#"+t+"EX"))}else{n(e("a",this),e("#"+t+"EX"))}});e(".timelineMajorMarker").click(function(){var t=e(this).parents(".timelineMajor").find(".timelineMinor").length;var i=e(this).parents(".timelineMajor").find(".open").length;if(t>i){n(e(this).parents(".timelineMajor").find("dt a","dl.timelineMinor"),e(this).parents(".timelineMajor").find(".timelineEvent"))}else{r(e(this).parents(".timelineMajor").find("dl.timelineMinor a"),e(this).parents(".timelineMajor").find(".timelineEvent"))}});e(".expandAll").click(function(){if(e(this).hasClass("expanded")){r(e(this).parents(t.timelineContainer).find("dt a","dl.timelineMinor"),e(this).parents(t.timelineContainer).find(".timelineEvent"));e(this).removeClass("expanded").html(t.expandAllText)}else{n(e(this).parents(t.timelineContainer).find("dt a","dl.timelineMinor"),e(this).parents(t.timelineContainer).find(".timelineEvent"));e(this).addClass("expanded").html(t.collapseAllText)}})})}})(jQuery)
$.timeliner();