Javascript更多/更少按钮滑动动画？

我对Javascript只有非常基本的了解，我希望能够使显示/隐藏内容的“更多/更少”按钮成为动画幻灯片，而不是即时更改。以下是我目前拥有的Javascript：

function doMenu(item) {
    obj=document.getElementById(item);
    col=document.getElementById("x" + item);
    if (obj.style.display=="none") {
        obj.style.display="block";
        col.innerHTML="[-] Less";
    } else {
        obj.style.display="none";
        col.innerHTML="[+] More";
    }
}

有人知道我如何将此Javascript改为幻灯片吗

编辑我用来显示/隐藏内容的链接示例

<a href="JavaScript:doMenu('main');" id=xmain>[+] More</a>

---

查看jquery库（向下滑动）： -

---

这里有一个jquery方法来实现这一点。。。（虽然我没有时间测试…）

剧本：

$(function() {     
       $(".moreLess").hide();

       $(".moreLessSwitch").toggle(function() {             
            $(this).html("[-] Less");            
            $(this).prevAll(".moreLess").slideDown();         
       }, function() {            
            $(this).html("[+] More");            
            $(this).prevAll(".moreLess").slideUp();        
       }); 

});

HTML：

stuff to always show
<div class="moreLess">stuff to hide...</div>
<div class="moreLessSwitch">[+] More</div>

要始终显示的内容
要隐藏的东西。。。
[+]更多

编辑：我不应该发布w/out测试

---

这是正在工作的JSFIDLE:

您应该仔细研究jQuery和

.slideToggle（）

方法…@ShaneBlake我知道我可能如何使用它，但我不知道如何将它合并到我的方法中。再说一次，我对Javascript（和jQuery）有点陌生，我真的不知道如何在我的方法中使用它。不要链接到w3schools。链接到真实的东西：我担心这没有任何作用，

[+]More

实际上不是调用函数的链接，我不知道它怎么可能做任何事情。此外，您在

.toggle（function（）

@Tory-是的，我缺少了一个“）”中缺少了一个括号，以及其他内容。。。但是，按照链接到jsFiddle并享受…我看到正在工作的jsFiddle，做得很好。。。出于某种原因，这对我的网站不起作用。单击

[+]More

没有任何作用，即使当我检查它和我想要隐藏的内容时，div确实分配了正确的类。@Tory-您是否已将jQuery添加到页面中？（如果是这样的话，我可能需要看看你的HTML到底是什么样子的…）我正在通过WAMP通过本地apache服务器运行它，这是不是有jQuery？