A List accordion (ON CLICK)

by hellosze

HTML

<ul id="timeline">
  <li id="a1">
      <div class="y">2012</div>
      <div>
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>
      </div>
    </li>
  <li>
      <div class="y">2011</div>
      <div>
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>     
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>               
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>     
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>            
      </div>    
   </li>
  <li>
      <div class="y">2010</div>
      <div>
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>
          <span class="l">1</span>
          <span class="l">2</span>
          <span class="l">3</span>          
      </div>       
   </li>
</ul>

CSS

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.y { float: left; width: 40px; font-weight:bold; font-size:16px; }
.l { float: left; width: 15px; }
ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

ul li {
  display: block;
  overflow: hidden;
  height: 12px;
  width: 40px;
}

#a1{
  width: 380px;
}
ul#timeline ul { display: inline-block }

JavaScript

$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 380;
    minWidth = 40;    

    $("ul#timeline li").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:800 });
          $(this).animate({width: maxWidth+"px"}, { queue:false, duration:800});
         lastBlock = this;
      }
    );
});