複数の目次があるアコーディオンメニューについて(CSSのみで実装可能なのかどうかについて)

複数の目次があるアコーディオンメニューを作った際に、１つ目の目次をタップしアコーディオンメニューをオープンしたとします。
２つ目の目次をタップした際、2つ目の目次のアコーディオンメニューがオープンし、１つ目の目次のアコーディオンメニューはクローズするといった連動した動作を実装したいです。
これはCSSのみで可能でしょうか？
検索したらjQueryでの実装しか見当たりませんでした。
ご回答の程、よろしくお願いいたします。

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

回答1件

ベストアンサー

可能です。

1.メニューをクリックしたらメニューを開く
2.別のメニューが開いていれば閉じ、クリックしたメニューを開く
3.メニューを開いた後に同じメニューをクリックしたらそのメニューを閉じる

という機能をcssのみで実装した例が下記になります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        ol {
10            position: relative;
11            padding: 0;
12            list-style: none;
13            display: none;
14            z-index: 3;
15            width: 120px;
16        }
17
18        label {
19            position: relative;
20            display: inline-block;
21            z-index: 1;
22        }
23
24        input {
25            position: relative;
26            display: block;
27            visibility: hidden;
28        }
29
30        #i01:checked~#ol01 {
31            display: block;
32        }
33
34        #i01:checked~.close01,
35        #i02:checked~.close02,
36        #i03:checked~.close03,
37        #i04:checked~.close04 {
38            z-index: 2;
39        }
40
41        #i02:checked~#ol02 {
42            display: block;
43        }
44
45        #i03:checked~#ol03 {
46            display: block;
47        }
48
49        #i04:checked~#ol04 {
50            display: block;
51        }
52
53        #close01,
54        #close02,
55        #close03,
56        #close04 {
57            display: none;
58        }
59
60        .close {
61            width: 100%;
62            height: 100%;
63            position: absolute;
64            top: 0;
65            left: 0;
66            z-index: 0;
67        }
68
69        .wrap {
70            width: 100px;
71            position: relative;
72        }
73    </style>
74</head>
75
76<body>
77    <div class="wrap">
78        <input type="radio" name="01" id="i01">
79        <label for="i01">メニュー1</label>
80        <ol id="ol01">
81            <li>ラーメン</li>
82            <li>チャーハン</li>
83            <li>餃子</li>
84        </ol>
85        <input type="radio" name="01" id="close01">
86        <label for="close01" class="close close01"></label>
87    </div>
88    <div class="wrap">
89        <input type="radio" name="01" id="i02">
90        <label for="i02">メニュー2</label>
91        <ol id="ol02">
92            <li>牛丼</li>
93            <li>鉄火丼</li>
94            <li>親子丼</li>
95        </ol>
96        <input type="radio" name="01" id="close02">
97        <label for="close02" class="close close02"></label>
98    </div>
99    <div class="wrap">
100        <input type="radio" name="01" id="i03">
101        <label for="i03">メニュー3</label>
102        <ol id="ol03">
103            <li>ピザ</li>
104            <li>ポテト</li>
105            <li>ナゲット</li>
106        </ol>
107        <input type="radio" name="01" id="close03">
108        <label for="close03" class="close close03"></label>
109    </div>
110    <div class="wrap">
111        <input type="radio" name="01" id="i04">
112        <label for="i04">メニュー4</label>
113        <ol id="ol04">
114            <li>テリーヌ</li>
115            <li>フォアグラ</li>
116            <li>コンソメスープ</li>
117        </ol>
118        <input type="radio" name="01" id="close04">
119        <label for="close04" class="close close04"></label>
120    </div>
121</body>
122
123</html>

投稿2020/08/04 21:15

編集2020/08/04 21:21

Jon_do

総合スコア1373

5hqch1

2020/08/05 05:10

大変参考になりました！ z軸とpositionを巧みに利用した面白いトリックですね！ありがとうございました！

5hqch1

2020/08/07 04:22 編集

CSSの記述がブラッシュアップできたので展開します！解説書き込みました。 ※SCSS記法で記述しているので注意。 // ・z軸の順番 // 初期値：ol(3)→label(1)→close(0)※ただしolはクローズ // オープン時：ol(3)→close(2)→label(1) // ・解説 // z軸の関係により再度クリックするとcloseが選択されクローズする // inputのname属性を全て統一することで他の項目をクリックすると元々オープンしていた項目は自動でクローズする、且つ、クローズに対する擬似クラス記述は不要となる .wrap { // 任意の幅で良い width: 100%; // クローズボタンの相対位置に指定するので必要 position: relative; // 識別用 background-color: rgba(200,0,0,0.5); input { // inputは非表示 display: none; } label { // z-indexを指定するので必要 position: relative; // ブロック要素へ変更 display: block; // 上から2番目に配置 z-index: 1; // 識別用 background-color: rgba(0,200,0,0.5); } ol { // z-indexを指定するので必要 position: relative; // 初期margin,paddingの排除 margin: 0; padding: 0; // スタイルの排除 list-style: none; // 初期は非表示 display: none; // 1番上に配置(クローズより上に配置することで項目を選択することができる) z-index: 3; // 任意の幅で良い width: 100%; // 識別用 background-color: rgba(0,0,200,0.5); } .close { // 親要素に合わせる width: 100%; // 親要素に合わせる height: 100%; // 親要素に対して絶対位置指定 position: absolute; // 親要素に合わせる top: 0; // 親要素に合わせる left: 0; // 初期は1番下へ配置 z-index: 0; // 識別用 background-color: rgba(200,200,0,0.5); } } // 項目オープン時olを表示 #i01:checked ~ #ol01 { display: block; } #i02:checked ~ #ol02 { display: block; } #i03:checked ~ #ol03 { display: block; } #i04:checked ~ #ol04 { display: block; } // 項目オープン時にクローズボタンを上から2番目に配置(これで項目より上に配置され項目をクリックした際クローズボタンがクリックされる様になる) #i01:checked ~ .close01, #i02:checked ~ .close02, #i03:checked ~ .close03, #i04:checked ~ .close04 { // オープン時にクローズボタンを上から2番目に配置(olが1番上にあるのでクローズボタンが項目に被ることはない) z-index: 2; }

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