一回のアクションでアコーディオンを複数動かしたい（CSS）

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

前回、こちらの質問にて、『一つのページの中で複数実現したいのですが、２つ以上の「もっと読む」を実装すると、２つめのボタンを押しても１つめのものが反応してしまいます。』とご質問させていただいたのですが、実際には、1つめのボタンを押して、すべての<ul>タグで囲まれた全ての「もっと読む」以下が動くようにしたいと考えています。

試してみたこととして、accordion-boxクラス以下を全て囲んでみたりしてみたのですが、デザインが崩れてしまうばかりでした。CSSだけで難しければ、jQueryを使うのもありだと考えています。
初心者で申し訳ありませんが、お助けくださいませ。。。

HTML
1<ul>
2  <li>
3    <div class="accordion-box">
4      <input id="ac00" type="checkbox">
5      <label for="ac00"></label>
6      <div class="accordion-container">
7        <h3>タイトル</h3>
8        <p>世界中どこを探してもなかったので作りました。</p>
9        <p>jsを使っていないのでコンフリクトすることはありません。</p>
10        <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p>
11        <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p>
12      </div><!— accordion-container -->
13    </div><!— accordion-box -->
14  </li>
15
16  <li>
17    <div class="accordion-box">
18      <input id="ac01" type="checkbox">
19      <label for="ac0"></label>
20      <div class="accordion-container">
21        <h3>タイトル</h3>
22        <p>世界中どこを探してもなかったので作りました。</p>
23        <p>jsを使っていないのでコンフリクトすることはありません。</p>
24        <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p>
25        <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p>
26      </div><!— accordion-container -->
27    </div><!— accordion-box -->
28  </li>
29
30  <li>
31    <div class="accordion-box">
32      <input id="ac02" type="checkbox">
33      <label for="ac02"></label>
34      <div class="accordion-container">
35        <h3>タイトル</h3>
36        <p>世界中どこを探してもなかったので作りました。</p>
37        <p>jsを使っていないのでコンフリクトすることはありません。</p>
38        <p>スマホにも対応。iPhone4くらいの小さい画面でも大丈夫です。</p>
39        <p>閉じるボタンは要らないときは「.accordion-box input:checked + label」のdisplay:noneを有効にしてください。</p>
40      </div><!— accordion-container -->
41    </div><!— accordion-box -->
42  </li>
43</ul>

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/24 12:11

CSSも提示してください。

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

回答1件

ベストアンサー

とりあえず <label for="ac0"></label> ⇒ <label for="ac01"></label> です。

「全ての」が「どれを押しても全部開く」ということであれば、
0. <input id="ac00" type="checkbox"> をul要素の直前に移動
0. label要素の for を全て "ac00" に変更
0. CSSを変更

CSS
1input:checked + ul .accordion-box label:after {
2    content: "閉じる";
3}
4input:checked + ul .accordion-box label:before {
5    content: "↑";
6}
7input:checked + ul .accordion-box .accordion-container {
8    height: auto;
9    padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
10    -webkit-transition: all 0.1s;
11    -moz-transition: all 0.1s;
12    -ms-transition: all 0.1s;
13    -o-transition: all 0.1s;
14    transition: all 0.1s;
15}
16```**動くサンプル：**[https://jsfiddle.net/kdm9y4ng/1/](https://jsfiddle.net/kdm9y4ng/1/)