Jquery 单击后，显示（幻灯片）详细信息以供公文包使用

这是我的html/css：

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

这是一个使用此效果的网站，向下滚动到公文包并单击一个项目：

我给网站背后的人发了邮件，他们给了我：

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

---

但我无法让它工作。我希望你们能帮助我

示例站点所做的基本上是使用锚，但使用jquery扭曲。 我建议从jQueryUI中的选项卡开始，添加您想要的任何滑动效果。 参考资料：

此处为工作演示

JQUERY

---

是的，我对jquery还不是很在行。。。A我希望有人能用jquery编辑一下我的小提琴，这样我就能看到并理解如何工作了。。我希望有人能抽出时间给我做个榜样！哇！我只是问了一个例子，你几乎马上就提供了。非常感谢！是的，我要实施这个。如果一切顺利的话，我会接受你的回答，这还不错。但是，我需要知道的是如何强制公文包下面的内容向下滑动到。因为现在这个描述消失在我作品集下面的内容后面了。编辑：我的公文包下面的部分内容确实向下滑动。但有些部分并非如此。这是css吗？尝试为所有描述的div使用一个新的div，并使用css，float:left；宽度：100%；对于这个描述div.Coz，我看不到你的html标记和css，所以我不能确切地说出来。可能是你创建了一个JSFIDLE。当我尝试将我的html/css做成一个FIDLE时，代码不会将任何内容滑到公文包下面。所以，这就是我所拥有的：投资组合下面是一个div，包含我网站的一个新部分。这是关于我的部分。这个div有一个背景色。div的内容有向下滑动的文本、img等，但div没有。所以“关于我”部分的内容确实会向下滑动，但彩色背景不会。我想这是唯一一个没有滑下来的部分。

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