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

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();