CSSだけで作るアコーディオンが上手く反応しません

前提・実現したいこと

よろしくお願いいたします。
こちらのサイトを参考に
CSSだけで作るアコーディオンメニューで
FAQページを作成しています。

仕組みとしては下記

html
1    <input id="acd-check1" class="acd-check" type="checkbox">
2    <label  class="acd-label" for="acd-check1">
3        <p>ラベル</p>
4    </label>
5    <div class="acd-content">
6        <p>隠れているテキスト</p>
7    </div>

labelのテキストをクリックすると、inputがcheckedになり
それに反応して隠れているテキストを見せる仕組みです

☆codepen

が、実際に作成してみると
labelの箇所がクリック出来たり、出来なかったり
まちまちで上手く反応しません。

labelにはcursor: pointer;が仕込んであるのですが、
それすら反応したりしなかったりなので、
そもそもlabelタグ自体の問題ではないかもしれません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="EUC-JP">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="https://shopping.geocities.jp/exmail/css/yahoo-category.css" />
8    <link href="yahoo-faq.css" rel="stylesheet" type="text/css" />
9    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10    <title>Document</title>
11
12</head>
13<body>
14    <!-- よくあるご質問・お問い合わせここから -->
15    <h2>よくあるご質問・お問い合わせ</h2>
16    <input id="acd-check1" class="acd-check" type="checkbox">
17    <label  class="acd-label" for="acd-check1">
18        <p>文字料金や送料はいくら掛かりますか？</p>
19    </label>
20    <div class="acd-content">
21        <p>文字数による料金の課金はございません。<br>また、日本全国送料無料です。<br>日本以外の国へ送る場合は、海外加算料があらかじめ加算してある海外向けの電報商品をお選びください。</p>
22    </div>
23    <input id="acd-check2" class="acd-check" type="checkbox">
24    <label  class="acd-label" for="acd-check2">
25        <p>配達希望日時に配達可能かどうかを知りたいのですが？</p>
26    </label>
27    <div class="acd-content">
28        <p><a href="https://shopping.geocities.jp/exmail/guide/jp_area.html">こちら</a>をご覧下さい。</p>
29    </div>
30    <input id="acd-check3" class="acd-check" type="checkbox">
31    <label  class="acd-label" for="acd-check3">
32        <p>電報料金の支払いはどんな方法がありますか？</p>
33    </label>
34    <div class="acd-content">
35        <p>ご利用いただけるお支払い方法は下記の通りです。<br><br>
36                
37            ・クレジットカード決済<br>
38            ・PayPay残高払い<br>
39            ・Yahoo!マネー/預金払い <br>
40            ・ソフトバンク・ワイモバイルまとめて支払い <br>
41            ・ドコモ払い <br>
42            ・auかんたん決済<br>
43            ・モバイルSuica<br>
44            ・コンビニ（セブン-イレブン）<br>
45            ・コンビニ（ファミリーマート、ローソン、その他）<br>
46            ・銀行振込（ペイジー）<br>
47            ・NP後払い（コンビニ後払い）<br>
48
49        詳しくは<a href="https://store.shopping.yahoo.co.jp/exmail/guide.html">こちら</a>をご覧ください。</p>
50    </div>
51    <input id="acd-check4" class="acd-check" type="checkbox">
52    <label  class="acd-label" for="acd-check4">
53        <p>メッセージなど申込内容の変更をしたいのですが？</p>
54    </label>
55    <div class="acd-content">
56        <p>メッセージやお届け先情報など電報内容の変更は、発送準備前であれば可能です。<br>
57            変更箇所や変更内容をメールまたはお電話でご連絡ください。</p>
58    </div>
59    <input id="acd-check5" class="acd-check" type="checkbox">
60    <label  class="acd-label" for="acd-check5">
61        <p>注文をキャンセルしたいのですが？</p>
62    </label>
63    <div class="acd-content">
64        <p>お申込み手続き完了後、商品発送前であればキャンセルすることができます。<br>
65            「お申込み確認メール」などをご返信の上、その旨をご連絡ください。<br>
66            ただし、キャンセル処理まで時間が要する場合があります。<br>
67            ただし、商品発送後は、一切キャンセルできません。<br>
68            また、配達の途中で差し止めや取り戻しされる場合は、これにかかる実費をご負担いただくことがございます。</p>
69    </div>
70    <input id="acd-check6" class="acd-check" type="checkbox">
71    <label  class="acd-label" for="acd-check6">
72        <p>先様にお届けする商品に明細書は入りませんか？</p>
73    </label>
74    <div class="acd-content">
75        <p>金額のわかる納品書・明細書などは一切同封いたしません。</p>
76    </div>
77    <input id="acd-check7" class="acd-check" type="checkbox">
78    <label  class="acd-label" for="acd-check7">
79        <p>海外への電報はどのくらいで届けられますか？</p>
80    </label>
81    <div class="acd-content">
82        <p>代表的な国への配達所要日数は以下の通りです。<br>ただし、以下に記載する国別の配達日数は、各国の主要都市あての標準的な日数であり、必ずお届けできる日数ではありません。<br>これより日数を要する場合があります。余裕を持ってお早めにお申込みいただくようお願いします。<br>詳しくは<a href="https://store.shopping.yahoo.co.jp/exmail/b3a4b3b0ca.html">こちら</a>をご覧ください。<br>
83            <br>
84            アメリカ合衆国（米国）　４日間　　日・祝は配達しません<br>
85            中華人民共和国　　　　　４日間　<br>
86            大韓民国（韓国）　　　　３日間　　日・祝は配達しません<br>
87            台湾　　　　　　　　　　２日間<br>
88            シンガポール　　　　　　３日間　　土・日・祝は配達しません<br>
89            グアム　　　　　　　　　６日間　　日・祝は配達しません<br>
90            オーストラリア　　　　　５日間　　土・日・祝は配達しません<br>
91            英国　　　　　　　　　　４日間　　土・日・祝は配達しません</p>
92    </div>
93    <!-- </div> -->
94    <!-- よくあるご質問・お問い合わせここまで -->
95
96
97</body>
98</html>

CSS
1@charset "EUC-JP";
2
3.acd-check {
4    display: none;
5}
6
7.acd-label {
8    background: #BF0000;
9    color: #fff;
10    display: table;
11    width: 100%;
12    cursor: pointer;
13}
14
15.acd-label p {
16    padding: 10px;
17    width: auto;
18  }
19
20  .acd-label p::before {
21    content: 'Q.';
22    margin-right: 10px;
23}
24
25.acd-label:after {
26    background: #BF0000;
27    box-sizing: border-box;
28    content: '\f067';
29    font-family: "Font Awesome 5 Free";
30    font-weight: 900;
31    height: 100%;
32    padding: 10px 20px;
33    line-height: 30px;
34    width: 50px;
35    display: table-cell;
36    vertical-align: middle;
37}
38
39.acd-content {
40    border: solid #555555;
41    border-width: 0 1px 1px 1px;
42    color: #555555;
43    height: 0;
44    opacity: 0;
45    padding: 0 10px;
46    /* transition: all.3s;
47    -webkit-transition: all.3s;
48    -moz-transition: all.3s;
49    -ms-transition: all.3s;
50    -o-transition: all.3s; */
51    /*visibility: hidden; */
52}
53
54.acd-content p::before {
55    content: 'A.';
56    margin-right: 10px;
57}
58
59.acd-check:checked + .acd-label:after {
60    content: '\f068';
61}
62
63.acd-check:checked + .acd-label + .acd-content {
64    height: auto;
65    opacity: 1;
66    padding: 10px;
67    /* visibility: visible; */
68    margin-bottom: 10px;
69}
70
71
72@media screen and (max-width:768px)  {
73    .acd-label p {
74        padding: 0 0 0 10px;
75      }
76}
77
78

試したこと

idとforの対称については、よく確認したつもりです。

補足情報（FW/ツールのバージョンなど）

関係ないと思いますが
最終的にはyahooショッピングのECサイトにアップする予定です。
当方環境は
Windows7
chromeとfirefoxで同じ現象が再現します
HTMLを勉強し始めて半年ほどです。

初心者の質問ですが、
どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

acd-contentクラスの高さを 0 にしてますが、中身のp要素の高さはそのままですので、それが下のラベルを覆っているのが原因でしょう。

対策としては、acd-contentクラスに overflow: hidden; を付加すればはみ出した部分は隠されますので、下のラベルはマウスホバーに反応するようになります。

ただし、ラベル間の余白がなくなりますので、margin-bottom で余白を追加しておくといいでしょう。

css
1.acd-content {
2    border: solid #555555;
3    border-width: 0 1px 1px 1px;
4    color: #555555;
5    height: 0;
6    opacity: 0;
7    padding: 0 10px;
8    overflow: hidden; /* 追加 */
9    margin-bottom: 15px; /* 追加 */   
10    /* transition: all.3s;
11    -webkit-transition: all.3s;
12    -moz-transition: all.3s;
13    -ms-transition: all.3s;
14    -o-transition: all.3s; */ 
15}