accordion <li> elements (ON CLICK)

by hellosze

HTML

<ul>
  <li>
    <a id="a1">
      <img src="http://fpoimg.com/60x60" />
      <p>
        <strong>Freebies</strong><br/>
        Download free files to make your job easier.
      </p>
    </a>
      <ol><li>LINK</li><li>LINK</li><li>LINK</li></ol>
  </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: 175px;
  width: 75px;
}

#a1{
  width: 210px;
}

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

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}

JavaScript

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

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