Javascript 显示/隐藏/切换显示为一个整体div

当我切换显示在下方的div时，div底部的按钮以不同/分离的方式显示，大部分代码来自另一个问题。它如何能够作为包装器div的一部分一起滑出呢？谢谢

css:

html:

在fiddle中查看它

我将more类添加到button div`。看起来很不错：

Javascript:

---

这是更新的。包含按钮的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;">

更新的小提琴：

---

谢谢你的回答；但是，当您将fixed更改为absolute时，button横幅不再停留在div的底部。用户滚动div时，button横幅将四处滚动。对于疏忽，我深表歉意，我为外部div和button div show toggle添加了一个类，而我将其用于jQuery toggle函数。我还必须将display:none添加到按钮div中，以使其正常工作。希望这能有所帮助，很抱歉回复太晚。尽管这不是我想要的答案，但这是一项伟大的工作。谢谢。我做的是让他们按你想要的方向滑动，并更新小提琴。这就是你想要的吗？是的，我一直在玩弄你的建议，让它像你更新的解决方案一样工作。再次感谢。

<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>

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

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

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