如何將jQuery手風琴默認設置爲未打開？並切換打開/關閉？

Question

因此，我有一個有大量手風琴的頁面，當第一次初始加載每一個手風琴時，都會打開，直到我點擊一個手風琴。然後他們都關閉了，但那一個，然後從那裏工作很好。

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'); 
}); 

Answer 2

要使用你的代碼做到這一點，你需要的document.ready功能將關閉內容：

$(document).ready(function() { 

    $('.ss_content').hide(); 

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

然而，這將導致您的內容第二，同時可見頁面加載。這樣做的更好的辦法是使用CSS類：

$(document).ready(function() { 

    $('.ss_button').on('click',function() { 
     var menu = $(this).closest('.ss_menu'); 
     if (menu.hasClass('open')) { 
      $('.ss_menu.open').removeClass('open'); 
      menu.addClass('open'); 
     } 
     else { 
      menu.removeClass('open'); 
     } 
    }); 
}); 

在你的CSS

然後，設置一切封閉的默認狀態，但動畫它打開時，其父母有公開課：

.ss_menu { 
    overflow:hidden; 
} 

.ss_menu.open .ss_content { 
    opacity:1; 
    max-height:1000px; /*set this to a height much bigger than you expect*/ 
} 
.ss_content { 
    max-height:0; 
    opacity:0; 
    transition:all 0.2s ease-out; /*or whatever transition you want*/ 
} 

PS一個頁面中不能有多個項目具有相同的ID - 我認爲這是一個錯誤，並且使用ss_menu作爲類而不是ID選擇器。