顯示/隱藏/切換整個div顯示

Question

當我切換顯示在div下面的div時，div底部的按鈕以不同/分開的方式顯示（代碼的大部分來自此處的另一個問題）。 如何使它作為包裝div的一部分一起滑出？ 謝謝。

CSS：

.more { display: none }

的HTML：

<a href="#" id="showhide">Show more</a>

<div class="more" style="background-color:#f0f0f0;border:1px solid #d0d0d0;bottom:0px;display:none;height:30%;overflow:auto;padding:10px 10px 50px 10px;width:300px;position:fixed;right:0px;z-index:1;">
<div class="more1">
<h2>Risk Calculator</h2>
<p>Some text</p>
</div>

<div class="more2">
<h2>Some title</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>

<div class="more3">    
<h2>Some title</h2>
<p>Some text</p>
</div>
        <div style="background-color:#ccc;border:1px solid #ccc;bottom:0px;height:30px;padding:10px;position:fixed;right:0px;text-align:right;width:300px;">
            <input type='button' value='button1' />
            <input type='button' value='button2' />
    </div>

</div>

JavaScript：

$('#showhide').click(function(){
   $('.more').toggle('slow')
})

在小提琴中查看它http://jsfiddle.net/J2YgE/31/

Answer 1

我在按鈕div`中添加了more類。 看起來不錯：

Javascript：

$('#showhide').click(function(){
   $('.more').toggle(400);
});

這是更新的小提琴 。

Answer 2

包含按鈕的div的位置是“固定”的，這意味着它固定在窗口而不是其父窗口上。 將位置更改為“絕對”可解決此問題。 這是我更改的代碼段。

更新的div樣式：

<div style="background-color:#ccc;border:1px solid #ccc;bottom:0px;height:30px;padding:10px;position:absolute;right:0px;text-align:right;width:300px;">

更新的小提琴：

http://jsfiddle.net/J2YgE/36/