アコーディオンパネル（開閉式コンテンツ）の挙動がおかしい

Question

ブログでアコーディオンパネルを使って記事作成をしているのですが、その挙動がおかしいです。
本来であれば下記画像のように、ピンクのボタンを押すと、下にグレーのボックスが展開されます。

しかし、本文の一番上以外でアコーディオンパネルを使おうとすると、クリックしても開きません。
画面下部に”グググッ”といったような揺らぎが発生しますが、開きません。

このアコーディオンパネルはHTMLとCSSで作られており、コードは下記のようになります。

<div class="ac-box"><input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1"> ▼あらすじを開く </label>
<div class="ac-small">

ここにテキスト流す

</div>
</div>

.ac-box{
width: auto;
margin: 30px auto 5px;
}

.ac-box label{
max-width: 385px;
font-size: 16px;
font-weight: bold;
text-align: center;
background: #f05689;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #fff;
transition: all 0.5s;
}

.ac-box label:hover{
background: rgba( 240, 86, 137, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}

.ac-box input{
display: none;
}

.ac-box label:after{
color: #fff;
font-family:"FontAwesome";
content:" \f078";
}

.ac-box input:checked ~ label::after {
color: #fff;
font-family:"FontAwesome";
content:" \f077";
}

.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

.ac-box input:checked ~ div{
height: auto;
padding: 5px;
background: #eaeaea;
opacity: 1;
}

.ac-box div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-align: justify;
}
.ac-small p{
margin-bottom: 0px;
}

解決法をお分かりの方がいらっしゃいましたらご回答の程、よろしくお願い申し上げます。

Comments

[hatena19]

提示されたコードではきちんと開きます。
開かない現象の発生するコードを提示してください。

[marimokkori0724]

すみません。こちらのページより直接ご確認頂けませんでしょうか？
一番上のアコーディオンパネルは開きますが、その少し下のアコーディオンパネルが開かなくなっていると思います。

https://anicomil.com/2020/08/06/anime-ranking-top50/

Answer 1

最初のチェックボックスのid と次のチェックボックスのidが同じになっているのが原因です。
idの重複は許されません。重複していたら最初のものが選択されます。

試しに、2番目の開くボタンをクリックしてから先頭へスクロールしてみてください。最初のボタンの下のテキストが開いているはずです。

2番目の開くボタンのコードを下記に変更すればいいでしょう。

<div class="ac-box">
  <input id="ac-2" name="accordion-1" type="checkbox" />
  <label for="ac-2"> ▼あらすじを開く </label>
  <div class="ac-small">

ここにテキスト流す

  </div>
</div>

Comments

[marimokkori0724]

なるほど！そういう事だったのですね！！
確かに、2番目のボタンを押してから先頭にスクロールすると、先頭のアコーディオンパネルが開いておりました。ac-2にコードを修正したところ、問題が解決しました。
この度はありがとうございました。本当に助かりました(ノД`)・゜・。

Answer 2

こんばんは。

ソースコード拝見しました。

【2020年最新版】面白いおすすめ神アニメランキングTOP50 - アニコミる！？

原因はおそらく2つあります。

<script async=async src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

↑ひとつめは、async属性をつけて読み込んでいることです。これは非同期的にjQueryを読み込んでいることになるので、読み込みが終わる前に実行されているコードはエラーになります。

<script src=http://code.jquery.com/jquery-1.9.1.min.js></script>

↑ふたつめは、http スキームで読み込んでいることです。ページが https スキームの場合、http スキームの JavaScript はセキュリティの関係からブロックされます。

Comments

[marimokkori0724]

ご回答ありがとうございます。
一つ目の原因については、asyncをdeferに書き換え。
二つ目の原因については、テーマエディターよりコードを書き換え、httpsスキームの読み込みに変更しました。
しかしながら依然としてアコーディオンパネルが開かないままとなっております。他に思い当たる原因などありますでしょうか？