質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2015閲覧

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

marimokkori0724

総合スコア4

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/27 03:06

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

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

イメージ説明

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

HTML

1<div class="ac-box"><input id="ac-1" name="accordion-1" type="checkbox" /> 2<label for="ac-1"> ▼あらすじを開く </label> 3<div class="ac-small"> 4 5ここにテキスト流す 6 7</div> 8</div> 9

CSS

1.ac-box{ 2width: auto; 3margin: 30px auto 5px; 4} 5 6.ac-box label{ 7max-width: 385px; 8font-size: 16px; 9font-weight: bold; 10text-align: center; 11background: #f05689; 12margin: auto; 13line-height: 50px; 14position: relative; 15display: block; 16height: 50px; 17border-radius: 8px; 18cursor: pointer; 19color: #fff; 20transition: all 0.5s; 21} 22 23.ac-box label:hover{ 24background: rgba( 240, 86, 137, 0.55 ); 25-webkit-transition: all .3s; 26transition: all .3s; 27} 28 29.ac-box input{ 30display: none; 31} 32 33.ac-box label:after{ 34color: #fff; 35font-family:"FontAwesome"; 36content:" \f078"; 37} 38 39.ac-box input:checked ~ label::after { 40color: #fff; 41font-family:"FontAwesome"; 42content:" \f077"; 43} 44 45.ac-box div{ 46height: 0px; 47padding: 0px; 48overflow: hidden; 49opacity: 0; 50transition: 0.5s; 51} 52 53.ac-box input:checked ~ div{ 54height: auto; 55padding: 5px; 56background: #eaeaea; 57opacity: 1; 58} 59 60.ac-box div p{ 61color: #777; 62line-height: 23px; 63font-size: 14px; 64padding: 20px; 65text-align: justify; 66} 67.ac-small p{ 68margin-bottom: 0px; 69} 70

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatena19

2020/09/27 03:49

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

2020/09/27 14:49

すみません。こちらのページより直接ご確認頂けませんでしょうか? 一番上のアコーディオンパネルは開きますが、その少し下のアコーディオンパネルが開かなくなっていると思います。 https://anicomil.com/2020/08/06/anime-ranking-top50/
guest

回答2

0

ベストアンサー

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

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

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

html

1<div class="ac-box"> 2 <input id="ac-2" name="accordion-1" type="checkbox" /> 3 <label for="ac-2"> ▼あらすじを開く </label> 4 <div class="ac-small"> 5 6ここにテキスト流す 7 8 </div> 9</div>

投稿2020/09/27 18:44

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

marimokkori0724

2020/09/28 03:14

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

0

こんばんは。

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

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

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

html

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

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

html

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

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

投稿2020/09/27 12:06

Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

marimokkori0724

2020/09/27 14:47

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問