jQueryを使ってアコーディオンをクリックすると、□で囲まれた＋サインがマイナスに変わるようにしたい

クリックをすると、右端の＋がーになる（開きっぱなしでいい）動的なアコーディオンを作りたいのですがcodepen上では動いたものが、AWSに移すと途端に動かなくなりました。特に、CSSの部分、BeforeとAfterが全く効いていない状況です。

【HTML】

  <ul class="ac">
  <li>
    <div class="ac-label">
      <p>Label</p>
      <div class="icon-wrap"><span class="icon"></span></div>
    </div>
    <div class="ac-content">
      <p>Content</p>
    </div>
  </li>
  <li>
    <div class="ac-label">
      <p>Label</p>
      <div class="icon-wrap"><span class="icon"></span></div>
    </div>
    <div class="ac-content">
      <p>Content</p>
    </div>
  </li>
  </ul>

【CSS】

* {
  box-sizing: border-box;
  padding: 0;
}
.ac {
  width: 500px;
  margin: 0 auto;
}
.ac > li {
  padding-bottom: 6px;
  list-style: none;
}
.ac-label  {
  cursor: pointer;
  text-align: center;
  position: relative;
  border: 1px solid #d9d9d9;
}
.ac-content {
  display: none;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
}
.icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
  background: #000;
}
.icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.icon:before,
.icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #fff;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}
.icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/*＋、－切り替え*/
.icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

【jQuery】

$('.ac-label').on('click', function(e) {
    $(this).next().slideToggle();
    //クリックされたac-titleにopenクラスをつける
    $(this).toggleClass("open");
});

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。
JavaScriptの一番最初と最後に、下記のように付け足すと動きますでしょうか。

JavaScript
1$(document).ready(function(){
2    $('.ac-label').on('click', function(e) {
3        $(this).next().slideToggle();
4        //クリックされたac-titleにopenクラスをつける
5        $(this).toggleClass("open");
6    });
7});