如何实现浏览器刷新后默认关闭Accordion（手风琴）组件？

• 问题：浏览器刷新后，所有Accordion自动展开，点击任意Accordion标题可使其收缩，但期望刷新后全部处于收缩状态。

• 原jQuery代码：

$(document).ready(function(){
    $(".accordion h1").click(function(){
        var id = this.id;   /* 获取标题id */
    
        /* 遍历所有拥有.accordion-content类的元素 */
        $(".accordion-content").each(function(){
    
            if($("#"+id).next()[0].id != this.id){
                $(this).slideUp();
            }   
    
        });
    
        $(this). next(). toggle();  /* 选择h1后的div */
    });
}); 

• 修复方案：在页面初始化时，先将所有.accordion-content元素隐藏，只需在$(document).ready函数开头添加一行代码即可。

修改后的代码：

$(document).ready(function(){
    // 页面加载完成后默认隐藏所有Accordion内容
    $(".accordion-content").hide();

    $(".accordion h1").click(function(){
        var id = this.id;   /* 获取标题id */
    
        /* 遍历所有拥有.accordion-content类的元素 */
        $(".accordion-content").each(function(){
    
            if($("#"+id).next()[0].id != this.id){
                $(this).slideUp();
            }   
    
        });
    
        $(this).next().toggle();  /* 选择h1后的div */
    });
}); 

这样修改后，页面刷新完成后所有Accordion内容都会处于收缩状态，点击标题时依然可以正常展开/收缩，同时保持原有“点击一个标题时收起其他Accordion”的逻辑不变。

内容的提问来源于stack exchange，提问作者Shane Samuel