Div sliding down on click, and reversed, for multiple items - html

Question

So I have a portfolio website. 6 squares which which are clickable. I want the site beneath the item that's is clicked to slide down and i want it to display details for this portfolio item in the space thats created by sliding down the content.
I want the effect described in the following link. But this is only working for one item. I've got 6. If item 1 is clicked, content slides down and you get details. What I want is when you click item 2, the details from item 1 slides back up and the details for item 2 slides down.
How to slide down a div then .fadeIn() the content and vice versa?
An example: http://www.applove.se
Scroll down to the portfolio on this site and click on an item to see what I want to achieve.
This is my html. There is a UL above this, but for some reason when I copy it, the whole thing just gets messed up.
<li class="port_list">
<div id="port_img1"> intro_img1 </div>
</li>
<li class="port_list">
<div id="port_img2"> intro_img2 </div>
</li>
<li class="port_list">
<div id="port_img3"> intro_img3 </div>
</li>
</ul>
<ul id="wrapper_portfolio">
<li class="port_list">
<div id="port_img4"> intro_img4 </div>
</li>
<li class="port_list">
<div id="port_img5"> intro_img5 </div>
</li>
<li class="port_list">
<div id="port_img6"> intro_img6 </div>
</li>
</ul>
CSS wil make sure that the first 3 li will display horizontal. The last three are also displayed horizontally beneath the first three. I am not working with images, but with background-images for every div.
EDIT:
Mike asked me to fiddle my html and css. Zo here it is. http://jsfiddle.net/StillD/bDMxs/
The pink boxes are my portfolio items. Beneath them I want to present detailed information (whole browser width) of the portfolio item you click. So when you click portfolio item 1, the 3 items (displayed horizontally) beneath it should slide down to make room for the details of portfolio item 1. If you click item 2, the details of item 1 should disappear to make room for the details of item 2, and so on.
(The details are represented by the picture of the bird for now).

Answer 1

i think I understand what you want. here is a very simple jsfiddle example.
http://jsfiddle.net/yRcnz/1/
basically you will need some sort of element before each ul so the user has a place to click. once you have that area for a user to interact with, some simple javascript can toggle() the display of the ul elements.
$('.expandable-ul li').click(function() {
$(this).children('img').toggle();
});
$('.expandable-ul img').toggle();