使用javascript的可折叠标题内容

我正在努力编写适当的javascript来压缩和扩展我的内容

查看：

<div>
    <h3 id="roleHeader" class="roleHeader collapsible">Title</h3>
    <div>Content to display to users</div>
</div>

$(document).ready(function() {
            //collapsible management
            $('.collapsible').collapsible({
            });
        });

---

您可能正在寻找

滑动切换

。此功能将在上下滑动内容之间切换

试试这个

   $(document).ready(function() {
        $('.collapsible').click(function(){
            $(this).slideToggle(500);
        });
    });

500是动画的速度

您还可以将要隐藏和显示的对象作为目标。要么给它一个Id、类，要么用jQuery专门针对它。在这里，当您单击任何具有可折叠类的对象时，下一个

div

将隐藏并显示

    $(document).ready(function() {
        $(".collapsible").click(function(){
            $(this).next("div").slideToggle(500);
        });
    });

如果再次单击动画时需要停止动画以防止跳跃效果，请在效果之前添加

.stop（true）

    $(document).ready(function() {
        $(".collapsible").click(function(){
            $(this).next("div").stop(true).slideToggle(500);
        });
    });

---

您可以很容易地实现一个

jQuery(function($){
    $('.collapsible').click(function(){
        $(this).next().stop(true, true).slideToggle();
    }).next().hide()
})

---

演示：

使用的

可折叠插件是什么？你在找寡妇吗？你确定你不是说“手风琴”吗？