実装したコードでCSSが一つしか反応しない

いつもお世話になっております。

こちらの記事を参考にして、CSSのみで「もっと読む」機能を実装したいと考えています。
困っているのは、これを一つのページの中で複数実現したいのですが、２つ以上の「もっと読む」を実装すると、２つめのボタンを押しても１つめのものが反応してしまいます。

これをそれぞれに対応するためにはどうすればよろしいでしょうか？

html
1<div class="accordion-box">
2  <input id="ac00" type="checkbox">
3  <label for="ac00"></label>
4  <div class="accordion-container">
5    <h3>タイトル</h3>
6    <p>世界中どこを探してもなかったので作りました。</p>
7    <p>jsを使っていないのでコンフリクトすることはありません。</p>
8    <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p>
9    <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p>
10  </div><!— accordion-container -->
11</div><!— accordion-box -->

CSS
1.accordion-box {
2    position: relative;
3}
4.accordion-box label {
5    height: 140px; /* グラデーションの高さ */
6    cursor: pointer;
7    text-align: center;
8    font-size: 12px;
9    position: absolute;
10    bottom: 0;
11    width: 100%;
12
13    /* 以下グラデーションは「背景が白」に併せて設定しています */ 
14    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
15    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
16    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
17    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
18    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
19}
20.accordion-box input:checked + label {
21    background: inherit; /* 開いた時には背景グラデーションを消す */
22}
23.accordion-box label:after {
24    content: "続きをよむ"; /* ラベルの文字 */
25    letter-spacing: .05em;
26    line-height: 2.5rem;
27    position: absolute;
28    bottom: 20px;
29    left: 50%;
30    -webkit-transform: translate(-50%, 0);
31    transform: translate(-50%, 0);
32    color: #fff;
33    background-color: #000;
34    width: 18.75rem;
35    -webkit-border-radius: 20px;
36    -moz-border-radius: 20px;
37    border-radius: 20px;
38}
39.accordion-box label:before {
40    content: "↓";
41    font-weight: 700;
42    position: absolute;
43    bottom: 30px;
44    left: 50%;
45    -webkit-transform: translate(-140px, 0);
46    transform: translate(-140px, 0);
47    background-color: #fff;
48    z-index: 1;
49    -webkit-border-radius: 100%;
50    -moz-border-radius: 100%;
51    border-radius: 100%;
52    width: 20px;
53    height: 20px;
54    line-height: 20px;
55}
56.accordion-box input {
57    display: none;
58}
59.accordion-box .accordion-container {
60    overflow: hidden;
61    height: 200px; /* 開く前に見えている部分の高さ */
62    -webkit-transition: all 0.1s;
63    -moz-transition: all 0.1s;
64    -ms-transition: all 0.1s;
65    -o-transition: all 0.1s;
66    transition: all 0.1s;
67}
68
69
70.accordion-box input:checked + label {
71    /* display: none ; 閉じるボタンは要らないとき */
72}
73.accordion-box input:checked + label:after {
74    content: "閉じる";
75}
76.accordion-box input:checked + label:before {
77    content: "↑";
78}
79.accordion-box input:checked ~ .accordion-container {
80    height: auto;
81    padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
82    -webkit-transition: all 0.1s;
83    -moz-transition: all 0.1s;
84    -ms-transition: all 0.1s;
85    -o-transition: all 0.1s;
86    transition: all 0.1s;
87}

kei344

2017/11/11 10:03

「２つ以上」のHTMLを提示ください。

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

回答2件

ベストアンサー

idとforが衝突しているのが原因だと思います。

html
1      <input id="ac00" type="checkbox">
2      <label for="ac00"></label>

の部分が2つ目も同じなのではないでしょうか?

2つ目は例えば、

html
1      <input id="ac01" type="checkbox">
2      <label for="ac01"></label>

みたいにidとforを変えてください。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>cssでもっと読む</title>
6    <link rel="stylesheet" href="./style.css">
7  </head>
8  <body>
9    <div class="accordion-box">
10      <input id="ac00" type="checkbox">
11      <label for="ac00"></label>
12      <div class="accordion-container">
13        <h3>タイトル</h3>
14        <p>世界中どこを探してもなかったので作りました。</p>
15        <p>jsを使っていないのでコンフリクトすることはありません。</p>
16        <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p>
17        <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p>
18      </div><!-- accordion-container -->
19    </div><!-- accordion-box -->
20    <div class="accordion-box">
21      <input id="ac01" type="checkbox">
22      <label for="ac01"></label>
23      <div class="accordion-container">
24        <h3>タイトル</h3>
25        <p>世界中どこを探してもなかったので作りました。</p>
26        <p>jsを使っていないのでコンフリクトすることはありません。</p>
27        <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p>
28        <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p>
29      </div><!-- accordion-container -->
30    </div><!-- accordion-box -->
31  </body>
32</html>