jQuery expand DIV on click and replace contents
<p>I am trying to create an expandable rollout when the user clicks on a tab.</p>

<p>It is basically 2 rows of tabs, each with their own colour and when the user clicks on one of them a hidden DIV should animate out.
I Don't assume that this would be to hard to do, but the problem comes when the user clicks on a different tab when one is already open. Then the new content has to overtake the existing contents place.</p>

<p>this is what I have so far;
<a href="http://jsfiddle.net/craigzilla/W3afW/" rel="nofollow">http://jsfiddle.net/craigzilla/W3afW/</a></p>

<hr>

<pre>
                     The 4 images represent what should happen
                      when you click on tab 01, 02, 03 and 08  

 <img src="http://i.stack.imgur.com/ds44A.jpg" width="240">                   <img src="http://i.stack.imgur.com/VsgtZ.jpg" width="240">



 <img src="http://i.stack.imgur.com/grFpW.jpg" width="240">                   <img src="http://i.stack.imgur.com/E2df3.jpg" width="240">
</pre>
