On click, display (slide) details for portfolio use

Question

This is my html/css: 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 div's with my footer beneath my whole portfolio should slide down to make room for the details of portfolio item 1. Those details for this portfolio item should appear here. When you click item 2, the details for item 1 should disappear and the details for item 2 should appear.

This is a website which is using this effect (scroll down to the portfolio and click an item):

http://www.applove.se

I mailed the people behind this site and they gave me this:

onclick="$('#name').slideDown();
$('#name2').slideUp(); 
$('html, body').animate({scrollTop: $('#name.offset().top }, 600);"

But I am not able to get it to work. I hope you guys can help me out!

Answer 1

Working demo here http://jsfiddle.net/yeyene/NHskg/3/

JQUERY

$(document).ready(function(){
    $(".portfolio").click(function () {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('html, body').animate({scrollTop: $('#targetWrapper').offset().top }, 600);
    });
    $(".close").click(function () {
        $('.description').slideUp();        
        $('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
    });
}); 

Answer 2

what the example site is doing is basically using anchors (but with a jquery twist). I would suggest starting from the tabs (in jquery UI) and add whatever sliding effects you want. reference: http://jqueryui.com/tabs/#default