Another accordion

by hellosze

HTML

<ul>
  <li>
    <a id="a1">
      <img src="http://fpoimg.com/60x60" />
      <p>
          <ol>
          <li>Download free files to make your job easier.</li>
          <li>Download free files to make your job easier.</li>
          <li>Download free files to make your job easier.</li>
          </ol>              
      </p>
    </a>
  </li>
  <li>
    <a>
       <img src="http://fpoimg.com/60x60" />
       <p>
         <strong>Tutorials</strong><br/>
         Tips and tricks to help you
         keep up with the latest technology.
       </p>
    </a>
  </li>
  <li>
    <a>
      <img src="http://fpoimg.com/60x60" />
      <p>
        <strong>Inspiration</strong><br/>
        Get inspired by what other designers are doing.
      </p>
    </a>
  </li>
</ul>

CSS

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 310px;
}

ul li img{
  position: absolute;
  border: 3px solid #881212;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}
ol li { float: left; display: block; width: 25px; }
ol li { font-size: 6px; }

JavaScript

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

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