jquery - 单击时，显示(幻灯片)用于投资组合的详细信息

这是我的html / css：http://jsfiddle.net/StillD/bDMxs/

粉红色的盒子是我的投资组合项目。在它们下面，我想展示您单击的投资组合项目的详细信息（整个浏览器宽度）。因此，当您单击投资组合项目1时，带有我的页脚在整个投资组合之下的div应该向下滑动，以便为投资组合项目1的详细信息腾出空间。此投资组合项目的那些详细信息应显示在此处。当您单击项目2时，项目1的详细信息应消失，并显示项目2的详细信息。

这是一个使用此效果的网站（向下滚动至作品集并单击一个项目）：

http://www.applove.se

我邮寄了该网站背后的人员，他们给了我：

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

但是我无法使其正常工作。我希望你们能帮助我！

最佳答案

在这里工作演示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);
    });
});