slide切换div并移动另一个div中的按钮

Question

如何使用css和jquery执行此操作？

如jsfiddle所示，左栏中有一个按钮。点击此按钮滑动切换右栏中的div，显示另外2张图片（图片编号2，图片编号3）

我想做两件事：

1st：将按钮完全放在图片编号1的左下角。我实际上无法这样做，因为我不知道左栏中有多少文字而且我不知道它的高度图片1.

第二：当显示或隐藏div时，我希望按钮与div一起移动。最后，按钮应位于图片编号3的左下角

你能帮帮我吗？

html结构是基本的：

<div id="col_1">
    <p>Lorem ipsum<br />...<br /></p>
    <p><span id="button">see more pic</span></p>
</div>

<div id="col_2">
    <div id="pic_1">picture number 1</div>
    <div id="pic" class="hidden">      
        <div id="pic_2">picture number 2</div>
        <div id="pic_3">picture number 3</div>
    </div>
</div>

jquery是基本的：

$("#button").click(function () {
      $("#pic").slideToggle("slow");
    });

css也非常简单。你可以在jsfiddle上看到它。

Answer 1

你可以做位置相对。这是演示：jsfiddle.net/ar9UB/5 /

添加了这个CSS：

#button { position:relative; left: -90px; top:-20px; }

并移动了第2栏中的按钮。

希望这有帮助。