Div 在单击时向下滑动，并为多个项目反转

Question

所以我有一个投资组合网站。 6个可点击的方块。我希望单击的项目下方的网站向下滑动，并且我希望它在通过向下滑动内容创建的空间中显示此投资组合项目的详细信息。

我想要以下链接中描述的效果。但这仅适用于一项。我有 6 个。如果单击第 1 项，内容会向下滑动，您将获得详细信息。我想要的是当您单击第 2 项时，第 1 项的详细信息会向上滑动，第 2 项的详细信息会向下滑动。

How to slide down a div then .fadeIn() the content and vice versa?

一个例子：http://www.applove.se 向下滚动到此站点上的投资组合，然后单击一个项目以查看我想要实现的目标。

这是我的html。上面有一个 UL，但由于某种原因，当我复制它时，整个事情就搞砸了。

            <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 将确保前 3 li 将水平显示。最后三个也水平显示在前三个下方。我不使用图像，而是使用每个 div 的背景图像。

编辑：

Mike 让我摆弄我的 html 和 css。佐在这里。 http://jsfiddle.net/StillD/bDMxs/

粉红色的盒子是我的投资组合项目。在它们下方，我想显示您单击的投资组合项目的详细信息（整个浏览器宽度）。因此，当您单击投资组合项目 1 时，其下方的 3 个项目（水平显示）应向下滑动，为投资组合项目 1 的详细信息腾出空间。如果单击项目 2，项目 1 的详细信息应消失，为详细信息腾出空间第 2 项，以此类推。

（细节暂时以鸟的图片表示）。

Answer 1

我想我明白你想要什么。这是一个非常简单的 jsfiddle 示例。

http://jsfiddle.net/yRcnz/1/

基本上，您需要在每个 ul 之前添加某种元素，以便用户可以点击。一旦你有那个区域供用户交互，一些简单的 javascript 可以切换（） ul 元素的显示。

$('.expandable-ul li').click(function() {
    $(this).children('img').toggle();
});

$('.expandable-ul img').toggle();