Accordion alike using jquery

See more:

jQuery

I prepared a static(for now) 'accordion' for now:
*can't publish an image because of reputation, so i'll try to illustrate it:

---------------------------------------------------------------------------------------------
small Image|small Image|small Image|small Image| GreyContent | Big Image |
---------------------------------------------------------------------------------------------
As You can see it contains 5 areas, 1 for the open 'article'(GreyContent+Big Image) and the other 4 are for close ones.
All the small images contained like that:

<div class='pics'>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</div>

The current open('article') contained like that:

<div class="whyUsCarouselInner">
   <%# Container.DataItem.Image.Print()%>
     <div class="graycontent">
      ...
     </div>
</div>

*what i am trying to achieve is 'accordion' effect.
when clicking $('.pics li') <-small pic
-the small pic will expand with the gray content like appear in the picture i have attached.
-next, the 'current open' will be animate till it's grey content disappear and only the pic will stay
but it will become small like the other small ones in the class 'pics'

hope i explained myself right. any example, code, pseudo code will be appreciated.