:checkedプロパティが効かない｜HTMLとCSSのみでタブを作成する

前提・実現したいこと

CSSとHTMLのみ(スクリプトなし)でレスポンシブのタブを作成しています。

PCでは左図のように2カラムで表示し、タブレット以下は右図のようにタブをスケールダウンに変更してコンテンツを表示します。

▼以下、やりたいことです。
0. タブメニューをクリックすると右に該当のコンテンツが表示される。
0. タブレット以下スケールダウンメニューでは、タブメニューをクリックしたと同時にメニューが自動でクローズされる。

発生している問題・エラーメッセージ

inputとcheckedプロパティを用いて、コンテンツを表示させたいのですが、checkedプロパティが効いていないのか、タブをクリックしてもコンテンツが表示されません。

下記のCSSでコンテンツを非表示にしており、

CSS
1  max-height: 0;
2  opacity: 0;

タブ選択時に上記のCSSを解除する方法で表示させています。

CSS
1  max-height: initial;
2  opacity: 1;

カラム分けをせずに、タブを上部に(タブを横並びに)コンテンツを下部に持っていくと成功するのですが、カラム分けをしてタブとコンテンツを左右に並べるとどうも上手くいきません。
max-height: 0; opacity: 0;を削除すると、タブとコンテンツがきちんと2カラムで並んでいるのが確認できるため、やはりcheckedが機能していないように思います。

また、スケールダウンメニューではメニューをクリックしたとき自動でクローズさせる方法がわからないでおります。

該当のソースコード

HTML
1          <div class="gdlr-core-pbf-column gdlr-core-column-20 gdlr-core-column-first">
2            <!-- TAB CONTROLLERS -->
3            <input id="panel-1-ctrl"
4                   class="panel-radios" type="radio" name="tab-radios" checked>
5            <input id="panel-2-ctrl"
6                   class="panel-radios" type="radio" name="tab-radios">
7            <input id="panel-3-ctrl"
8                   class="panel-radios" type="radio" name="tab-radios">    
9            <input id="nav-ctrl"
10                   class="panel-radios" type="checkbox" name="nav-checkbox">
11            <!-- TABS LIST -->
12            <ul id="tabs-list">
13                <!-- MENU TOGGLE -->
14                <label id="open-nav-label" for="nav-ctrl"></label>
15                <li id="li-for-panel-1">
16                  <label class="panel-label"
17                         for="panel-1-ctrl">タブ1</label>
18                </li><!--INLINE-BLOCK FIX
19             --><li id="li-for-panel-2">
20                  <label class="panel-label"
21                         for="panel-2-ctrl">タブ2</label>
22                </li><!--INLINE-BLOCK FIX
23             --><li id="li-for-panel-3">
24                  <label class="panel-label"
25                         for="panel-3-ctrl">タブ3</label>
26                </li>
27                <label id="close-nav-label" for="nav-ctrl">Close</label>
28            </ul>   
29          </div>
30          <div class="gdlr-core-pbf-column gdlr-core-column-40">
31            <!-- THE PANELS -->
32            <article id="panels">
33              <div class="container">
34                <section id="panel-1">
35                  <main>
36                    <p>コンテンツ 1</p>
37                  </main>
38                </section>
39                <section id="panel-2">
40                  <main>
41                    <p>コンテンツ 2</p>
42                  </main>
43                </section>
44                <section id="panel-3">
45                  <main>
46                    <p>コンテンツ 3</p>
47                  </main>
48                </section>
49              </div>
50            </article>
51          </div>
52

CSS
1
2/*
3カラム
4※WPのテーマを使用のためクラス名がこのようになっています
5*/
6
7.gdlr-core-column-first {
8    clear: left;
9}
10.gdlr-core-column-20 {
11    float: left;
12    width: 33.3333%;
13}
14.gdlr-core-column-40 {
15    float: left;
16    width: 66.6666%;
17}
18.gdlr-core-pbf-column {
19    position: relative;
20}
21
22/*
23タブ
24*/
25ul#tabs-list {
26  list-style: none;
27  text-align: center;
28  margin: 0;
29  padding: 0;
30}
31
32label.panel-label {
33  -webkit-user-select: none;
34  -moz-user-select: none;
35  -ms-user-select: none;
36  user-select: none;
37  display: block;
38  width: 100%;
39  color: #8d8d8d;
40  font-size: 10px;
41  font-weight: 500;
42  text-transform: uppercase;
43  letter-spacing: 0.5px;
44  cursor: pointer;
45  border-color: #fff;
46  border-right-width: 2px;
47  border-right-style: solid;
48  transition: border-color 300ms, color 300ms;
49  -webkit-transition: border-color 300ms, color 300ms;
50  -moz-transition: border-color 300ms, color 300ms;
51  -o-transition: border-color 300ms, color 300ms;
52}
53label.panel-label:hover {
54  color: #d9d408;
55}
56
57/*
58コンテンツエリア
59*/
60
61#panels {
62  background-color: white;
63}
64#panels .container {
65  margin: 0 auto;
66}
67#panels section header label.panel-label {
68  padding: 12px 24px;
69  -webkit-box-sizing: border-box;
70  -moz-box-sizing: border-box;
71  box-sizing: border-box;
72}
73#panels section main {
74  -webkit-box-sizing: border-box;
75  -moz-box-sizing: border-box;
76  box-sizing: border-box;
77  max-height: 0;
78  opacity: 0;
79  -webkit-transition: opacity 600ms;
80  transition: opacity 600ms;
81  overflow-y: hidden;
82}
83
84/*
85タブcheckedでコンテンツを表示
86*/
87
88#panel-1-ctrl:checked ~ #panels #panel-1 main {
89  max-height: initial;
90  opacity: 1;
91  box-sizing: border-box;
92}
93
94#panel-2-ctrl:checked ~ #panels #panel-2 main {
95  max-height: initial;
96  opacity: 1;
97  box-sizing: border-box;
98}
99
100#panel-3-ctrl:checked ~ #panels #panel-3 main {
101  max-height: initial;
102  opacity: 1;
103  box-sizing: border-box;
104}
105
106
107/*
108タブレット以下
109*/
110
111@media all and (max-width: 767px) {
112
113 .gdlr-core-column-20, .gdlr-core-column-40, {
114    width: 100%;
115  }
116
117  ul#tabs-list {
118    height: 30vw;
119  }
120
121  #nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {
122    max-height: 46px;
123    opacity: 1;
124  }
125
126  #nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {
127    max-height: 46px;
128    opacity: 1;
129  }
130
131  #nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {
132    max-height: 46px;
133    opacity: 1;
134  }
135
136#open-nav-label {
137    display: block;
138    position: absolute;
139    top: 0;
140    right: 0;
141    bottom: 0;
142    left: 0;
143    cursor: pointer;
144  }
145
146  #nav-ctrl:checked ~ #tabs-list #open-nav-label {
147    display: none;
148  }
149
150  #close-nav-label {
151    display: block;
152    max-height: 0;
153    overflow-y: hidden;
154    background-color: #444444;
155    color: #ecf0f1;
156    padding: 0px;
157    -webkit-transition: max-height 200ms;
158    transition: max-height 200ms;
159    cursor: pointer;
160    text-transform: uppercase;
161    font-size: 12px;
162    line-height: 22px;
163    letter-spacing: 1px;
164  }
165
166  #nav-ctrl:checked ~ #tabs-list #close-nav-label {
167    max-height: 36px;
168    opacity: 1;
169    padding: 12px 24px;
170  }
171
172  #tabs-list {
173    position: relative;
174  }
175  #tabs-list label.panel-label {
176    padding: 12px 0;
177  }
178  #tabs-list #li-for-panel-1 {
179    background-color: #fff;
180    max-height: 0;
181    overflow-y: hidden;
182    -webkit-transition: max-height 200ms;
183    transition: max-height 200ms;
184  }
185  #tabs-list #li-for-panel-2 {
186    max-height: 0;
187    overflow-y: hidden;
188    -webkit-transition: max-height 200ms;
189    transition: max-height 200ms;
190  }
191  #tabs-list #li-for-panel-3 {
192    max-height: 0;
193    overflow-y: hidden;
194    -webkit-transition: max-height 200ms;
195    transition: max-height 200ms;
196  }
197  #tabs-list #li-for-panel-4 {
198    max-height: 0;
199    overflow-y: hidden;
200    -webkit-transition: max-height 200ms;
201    transition: max-height 200ms;
202  }
203  #tabs-list #li-for-panel-5 {
204    max-height: 0;
205    overflow-y: hidden;
206    -webkit-transition: max-height 200ms;
207    transition: max-height 200ms;
208  }
209 #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
210    max-height: 46px;
211    opacity: 1;
212  }
213  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
214    background-color: white;
215    color: #d9d408;
216    background-color: #d9d408;
217    color: white;
218  }
219
220  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
221    max-height: 46px;
222    opacity: 1;
223  }
224  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
225    background-color: white;
226    color: #d9d408;
227    background-color: #d9d408;
228    color: white;
229  }
230
231  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
232    max-height: 46px;
233    opacity: 1;
234  }
235  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
236    background-color: white;
237    color: #d9d408;
238    background-color: #d9d408;
239    color: white;
240  }
241
242#panels .container {
243    width: 100%;
244    margin: 0 auto;
245  }
246#panels section header {
247    display: block;
248  }
249}
250
251/*
252タブ デフォルト
253*/
254ul#tabs-list {
255  text-align: center;
256  max-width: 12em
257}
258ul#tabs-list li {
259  display: block;
260  text-align: left;
261  font-size: 0.875em;
262  width: 100%;
263  margin-bottom: 0;
264  -webkit-transition-property: border-right;
265  transition-property: border-right;
266  -webkit-transition-duration: 200ms;
267  transition-duration: 200ms;
268}
269ul#tabs-list li:hover {
270  color: #d9d408;
271  border-color: #d9d408;
272}
273ul#tabs-list li:hover:last-of-type {
274  border-right: 2px solid #d9d408;
275}
276      ul#tabs-list li label.panel-label {
277        border-top: 0px solid #d9d408;
278        padding: 10px 0;
279      }
280      ul#tabs-list li label.panel-label:hover {
281        color: #d9d408;
282        border-color: #d9d408;
283      }
284
285      #open-nav-label,
286      #close-nav-label {
287        display: none;
288      }
289
290      #nav-ctrl {
291        display: none;
292      }
293    }
294
295@media all and (min-width: 900px) {
296      main {
297        width: 80%;
298        margin: 0 auto;
299      }
300  }
301

試したこと

先述の通り、カラム分けをせずに、タブを上部に(タブを横並びに)コンテンツを下部に持っていくと成功します。タブを縦並びにしたい理由としては、メニューの数が多い（14コ）ことにあります。
※記述が長くなるため上記のソースコードは3つまでにしています。

やはりスクリプトなしでタブを作成することは不可能なのでしょうか。

何卒ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

think49

2019/09/01 12:23

カラム分けする/しないの差が不明なので、両者のHTML/CSSを書いてください。この手の検証は「最小限のソース」で行うと切り分けになるので、可能な限り、ソースを切り詰める事をお勧めします。本番適用はテストが成功した後になります。

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

回答3件

無効なセレクタ

CSS
1#panel-1-ctrl:checked ~ #panels #panel-1 main {
2  max-height: initial;
3  opacity: 1;
4  box-sizing: border-box;
5}

#panel-1-ctrl と #panels は「兄弟関係」ではない為、このセレクタは無効です。
正しくセレクタを指定する為には、#panel-1-ctrl の親要素を経由する必要があります。

:has()

Selectors Level 4 の :has() を利用する事で、親要素を経由する事が可能です。
(※ただし、2019-09-01現在は実装がありません)

CSS
1.gdlr-core-pbf-column:has(>#panel-1-ctrl:checked) + .gdlr-core-pbf-column>.panels #panel-1>main {
2  max-height: initial;
3  opacity: 1;
4  box-sizing: border-box;
5}