javascript - 如何将 jQuery Accordion 默认设置为未打开？并切换打开/关闭？

Question

所以我有一个包含大量 Accordion 的页面，当第一个页面最初加载时，默认情况下会打开每个 Accordion ，直到我单击一个。然后所有这些都关闭，除了那个，然后它就可以正常工作了。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="ss_menu">
  <a class="ss_button">Accordion 1</a>
  <div class="ss_content">
    Content 1
  </div>
</div>

<div id="ss_menu">
  <a class="ss_button">Accordion 2</a>
  <div class="ss_content">
    Content 2
  </div>
</div>

<div id="ss_menu">
  <a class="ss_button">Accordion 3</a>
  <div class="ss_content">
    Content 3
  </div>
</div>

CSS

/* Accordion controls */
#ss_menu {
  border: 1px solid #ccc;
}

.ss_button { 
    cursor: pointer;
    color: black;
}

.ss_content {
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

JS

jQuery(function() {
    jQuery('.ss_button').on('click',function() {
        jQuery('.ss_content').slideUp('fast');
        jQuery(this).next('.ss_content').slideDown('fast');
    });
});

以及相关的Codepen:http://codepen.io/jacob_johnson/pen/zvdQGO

所以我的问题是:
1.如何设置页面加载时默认关闭？
2. 如何通过再次单击激活按钮来切换一个事件状态？

如有任何帮助，我们将不胜感激。

问题 1 的解决方案
将 display: none 添加到我的内容元素。

Answer 1

在 CSS 中设置 display:none 来启动并更改代码，使其更智能地了解隐藏的内容。

jQuery('.ss_button').on('click',function() {
    var content = jQuery(this).next('.ss_content');
    jQuery('.ss_content').not(content).slideUp('fast');
    content.toggleSlide('fast');
});