CSSでアコーディオンを作りたい

CSSとHTMLのみでアコーディオンを作りたいのですが、うまくいきません。

アコーディオンAをクリックしたらアコーディオンが開きaaa・bbb・cccを表示、
アコーディオンBをクリックしたらアコーディオンが開きddd・eee・fffを表示、

というものを作りたいのですが、アコーディオンAをクリックすると aaa・bbb・ccc だけでなく ddd・eee・fff も表示されてしまいます。
また、アコーディオンをクリックする前から aaa・bbb・ccc ddd・eee・fff それぞれあるだろう位置にスペースができてしまっています。
どうすればうまくいくでしょうか？

HTML
1<div class="table">
2	<input type="checkbox" id="acd-btn01" class="acd-check">
3	<label class="row acd-label" for="acd-btn01">
4		<div class="cell">アコーディオンA</div>
5		<div class="cell">親</div>
6	</label>
7	<div class="row">
8		<div class="cell">aaa</div>
9		<div class="cell">子</div>
10	　</div>
11	<div class="row">
12		<div class="cell">bbb</div>
13		<div class="cell">子</div>
14	　</div>
15	<div class="row">
16		<div class="cell">ccc</div>
17		<div class="cell">子</div>
18	　</div>
19	<input type="checkbox" id="acd-btn02" class="acd-check">
20	<label class="row acd-label" for="acd-btn02">
21		<div class="cell">アコーディオンB</div>
22		<div class="cell">親</div>
23	</label>
24	<div class="row">
25		<div class="cell">ddd</div>
26		<div class="cell">子</div>
27	　</div>
28	<div class="row">
29		<div class="cell">eee</div>
30		<div class="cell">子</div>
31	　</div>
32	<div class="row">
33		<div class="cell">fff</div>
34		<div class="cell">子</div>
35	　</div>
36</div>

css
1div.table {
2	display: table;
3	width: 100%;
4}
5div.table .row {
6	display: table-row;
7}
8div.table .cell {
9	display: table-cell;
10	font-size: 1.1em;
11	height: 2.3em;
12	line-height: 2.3em;
13	padding: 0 10px;
14}
15.acd-check {
16	display: none;
17}
18.acd-content {
19	height: 0;
20	opacity: 0;
21	visibility: hidden;
22}
23.acd-check:checked + .acd-label ~ .acd-content {
24	height: 2.3em;
25	opacity: 1;
26	visibility: visible ;
27}

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

回答1件

ベストアンサー

親に対応する子要素をタグで囲まないと無理なので、display: table;によるテーブルレイアウトでは難しいですね。
FlexBoxレイアウトで組んでみました。

CSSに.acd-contentセレクタがあるのに、HTMLに対応するクラスがないので、これで子要素を囲みました。

html
1<div class="acd">
2  <input type="checkbox" id="acd-btn01" class="acd-check">
3  <label class="flex acd-label" for="acd-btn01">
4    <div>アコーディオンA</div>
5    <div>親</div>
6  </label>
7  <div class="acd-content">
8    <div class="flex">
9      <div>aaa</div>
10      <div>子</div>
11    </div>
12    <div class="flex">
13      <div>bbb</div>
14      <div>子</div>
15    </div>
16    <div class="flex">
17      <div>ccc</div>
18      <div>子</div>
19    </div>
20  </div>
21  <input type="checkbox" id="acd-btn02" class="acd-check">
22  <label class="flex acd-label" for="acd-btn02">
23    <div>アコーディオンB</div>
24    <div>親</div>
25  </label>
26  <div class="acd-content">
27    <div class="flex">
28      <div>ddd</div>
29      <div>子</div>
30    </div>
31    <div class="flex">
32      <div>eee</div>
33      <div>子</div>
34    </div>
35    <div class="flex">
36      <div>fff</div>
37      <div>子</div>
38    </div>
39  </div>
40</div>

アコーディオンAをクリックすると aaa・bbb・ccc だけでなく ddd・eee・fff も表示されてしまいます。

一般兄弟結合子(~)を使っているの原因です。これだと後ろの兄弟要素がすべて選択されます。

隣接兄弟結合子(+)を使うと直後の要素のみを選択できます。

css
1div.acd {
2  width: 100%;
3}
4div.acd .flex {
5  display: flex;
6  justify-content: space-between;
7}
8div.acd .flex div {
9  font-size: 1.1em;
10  height: 2.3em;
11  line-height: 2.3em;
12  padding: 0 10px;
13}
14.acd-check {
15  display: none;
16}
17.acd-content {
18  height: 0;
19  opacity: 0;
20  visibility: hidden;
21}
22.acd-check:checked + .acd-label + .acd-content {
23  height: auto;
24  opacity: 1;
25  visibility: visible ;
26}