Javascript 滑动切换整个div

我正在开发一个页面，其中内容隐藏在jquery切换按钮后面。我希望内容包装器在单击时水平和垂直展开（当前包装器仅垂直展开）

我不知道如何组织我的文件。目前，包装器具有以下css属性：

#wrapper {
width: 900px;
margin: 0 auto;
margin-top: 40px;
background-color:#FFF;
border-radius: 42px;
-moz-border-radius:42px;
padding:30px;
-webkit-box-shadow: 0 0 10px #000;
}

“panel”div通过以下方式控制javascript：

<script type="text/javascript">
    $(document).ready(function(){

$(".btn-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
}); 
    });
</script>

$（文档）.ready（函数（）{
$（“.btn幻灯片”）。单击（函数（）{
$（“面板”）。滑动切换（“慢速”）；
$（this）.toggleClass（“活动”）；返回false；
}); 
});

直接在css中更改#包装宽度会导致slideToggle中的内容被截断：即，如果设置了宽度，则包装在滑动后不会扩展到适当的水平大小。另一方面，如果删除width属性，页面将不再正确包装。我该如何解决这个问题

<div id="wrapper" >
<div id="intro" class="content-wrapper"><a href="#" class="btn-slide"><span class="content">CONTENT</span></a>
    <div class="wrapper-inner container"><div class="home-page container">
        <div id="panel">

---

我不确定我是否完全理解这个问题，但这里有两种可能的解决方案：
1.使用jQuery.animate（）方法代替slideToggle，这将为您提供所需的所有灵活性。

---

2.如果您对周围的布局有问题，请将包装器放在一个固定大小的div中，然后将#包装器更改为position:absolute

您可以使用一些小提琴吗：谢谢您的回答。Kyle，我添加了相关的html。西尔维奥，很遗憾，我没能用小提琴找到答案。谢谢你的建议谢谢karnyj。我现在正在使用动画，但在获取单击时展开的宽度时遇到问题。我的包装宽度是300px，但我希望它在单击时扩展到900px。jquery控制柄被设置为panel，用于设置动画以“切换”高度。当面板在单击按钮时展开时，如何获得要展开的包装宽度？非常感谢汉克斯的动画制作；答案是什么