アコーディオンを閉じた状態で表示したい

Question

前提・実現したいこと

アコーディオンメニューをサイトを参考にjQueryで作っています。
読み込んだ際は全て閉じた状態にしたいのですが
最初にページが表示される際一番上のメニューが開いた状態になってしまいます。

該当のソースコード

<div class="accordion animated">
<div class="acd-group">
<a href="#" class="acd-heading">アコーディオン1</a>
<div class="acd-des">内容が入ります。</div>
</div>
<div class="acd-group">
<a href="#" class="acd-heading">アコーディオン2</a>
<div class="acd-des">内容が入ります。</div>
</div>
<div class="acd-group">
<a href="#" class="acd-heading">アコーディオン3</a>
<div class="acd-des">内容が入ります。</div>
</div>
</div>

.accordion .acd-group .acd-heading:before { font-family: fontawesome; }
.accordion .acd-group .acd-heading:before { cursor: pointer; position: absolute; top: 6px; right: 20px; display: block; padding: 3px 6px 2px; content: "\f105"; font-size: 22px; line-height: 38px; }
.accordion .acd-group > .acd-heading > span { margin-right: 15px; }
.accordion .acd-heading { font-weight: 500; position: relative; padding: 20px !important; color: #353535; line-height: normal; cursor: pointer; background-color: #1abc9c; margin-bottom: 10px; display: block; font-family: 'Montserrat', sans-serif; text-transform: uppercase; border-radius: 3px; }
.acd-des { padding: 0 20px 20px 0; }
.accordion .acd-group.acd-active .acd-heading, .accordion .acd-group .acd-heading:hover { color: #84ba3f; }
.accordion .acd-group.acd-active .acd-heading:before { content: "\f107"; }
.accordion .acd-group.acd-active .acd-heading span { color: #fff; }

.accordion.animated .acd-group .acd-heading { box-shadow: none; border:none; font-size: 18px; margin-bottom: 0; color:#363636; text-transform: inherit; font-weight: 700; padding: 20px 0px 0; }
.accordion.animated .acd-group.acd-active .acd-heading { font-size: 28px; color: #84ba3f; margin-bottom: 20px; background: none !important;}
.accordion.animated .acd-group .acd-heading:hover{background: none !important; color: #84ba3f;}
.accordion.animated .acd-group .acd-heading::before { display: none; }
.accordion.animated .acd-group .acd-des { padding: 0 30px 20px; }

 (function($){
  "use strict";

    $('.accordion').each(function (i, elem) {
       var $elem = $(this),
           $acpanel = $elem.find(".acd-group > .acd-des"),
           $acsnav =  $elem.find(".acd-group > .acd-heading");
          $acpanel.hide().first().slideDown("easeOutExpo");
          $acsnav.first().parent().addClass("acd-active");
          $acsnav.on('click', function () {
            if(!$(this).parent().hasClass("acd-active")){
              var $this = $(this).next(".acd-des");
              $acsnav.parent().removeClass("acd-active");
              $(this).parent().addClass("acd-active");
              $acpanel.not($this).slideUp("easeInExpo");
              $(this).next().slideDown("easeOutExpo");
            }else{
               $(this).parent().removeClass("acd-active");
               $(this).next().slideUp("easeInExpo");
            }
            return false;
        });
      });

jQuery触り始めたばかりで、初歩的な質問で申し訳ありません。
ご教示いただけると助かります。

Comments

[itagagaki]

提示されているコードではアコーディオンメニュー自体が再現できません。
確認してみてください。
もしかしたらCSSも必要なのかもしれません。

[sacoz]

ご指摘ありがとうございます！
CSSも追加いたしました！

Answer 1

          $acpanel.hide().first().slideDown("easeOutExpo");

上記の.first().slideDown("easeOutExpo");で最初のメニューを表示していますので、当然の動作です。これを削除すれば表示されないでしょう。

---

上記だけだと、ページを読み込んだとき、メニューがすべて表示された状態で開き、すぐに閉じるという動作になります。
これが、想定した動作ならいいのですが、最初から非表示にしたいのなら、jQueryで非表示にするのではなく、
CSSで非表示にしておくといいでしょう。

 .acd-group > .acd-des {
  display: none;
} 

  $acpanel.hide() //.first().slideDown("easeOutExpo"); 後半削除
//  $acsnav.first().parent().addClass("acd-active");　ここも削除

Comments

[sacoz]

CSS追加し、jQueryの該当箇所を削除で動作しました！！
本当に助かりました。
自分でも更に知識深めたいと思います。
丁寧に教えていただきありがとうございました！