Javascript jQuery滑动divs

我有三个图像按钮，一旦我点击其中一个，就会出现一个包含文本的滑动div

以下是我的JavaScript代码：

    <script type="text/javascript">
    function showSlidingDiv() {
        $("#slidingDiv").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    function showSlidingDiv2() {
        $("#slidingDiv2").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    function showSlidingDiv3() {
        $("#slidingDiv2").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    </script>

函数showSlidingDiv（）{
$（“#slidingDiv”）。设置动画({
“高度”：“切换”
}, {
持续时间：300
})
}
函数showSlidingDiv2（）{
$（“#slidengdiv2”）。设置动画({
“高度”：“切换”
}, {
持续时间：300
})
}
函数showSlidingDiv3（）{
$（“#slidengdiv2”）。设置动画({
“高度”：“切换”
}, {
持续时间：300
})
}

该功能通过以下命令触发：

    <a href="#" onClick="showSlidingDiv(); return false;">

该脚本工作正常，但当前如果我单击内容彼此附加的所有链接，我希望实现的是在单击新链接后隐藏一个打开的div类

---

我将如何做到这一点？

我建议使用jQuery插件

更新： 您可以关闭所有div并打开所选div：

    function toggleDiv(selectedDiv) {
      // shortcut to select all sliding divs
      $('div[id^="sliding"]').animate({
              "height": "toggle"
          }, {
              duration: 300
          }, function () {
                $(selectedDiv).show();
      });
              }

在hrefs中，按如下方式调用函数：

onClick="toggleDiv('#slidingDiv1'); // use slidingDiv2, 3 for other hrefs

---

谢谢你的建议-但我喜欢当前的解决方案-如果我点击一个新的，有没有办法隐藏/关闭其他打开的div？