CSSのみでのアコーディオンメニュー

Question

こんにちは！
CSSのみでのアコーディオンメニューを実装しようと考えておりますが
以下のサンプルにさらに動きを加えたいと思っております。

参考サイト
https://codepen.io/takanorip/pen/mExJOZ

<div class="menu">
    <label for="menu_bar01">MENU01</label>
    <input type="radio" name="radio" id="menu_bar01" class="accordion" />
    <ul id="links01">
        <li><a href="">Link01</a></li>
        <li><a href="">Link02</a></li>
        <li><a href="">Link03</a></li>
        <li><a href="">Link04</a></li>
    </ul>
    <label for="menu_bar02">MENU02</label>
    <input type="radio" name="radio" id="menu_bar02" class="accordion" />
    <ul id="links02">
        <li><a href="">Link01</a></li>
        <li><a href="">Link02</a></li>
        <li><a href="">Link03</a></li>
        <li><a href="">Link04</a></li>
    </ul>
</div>

.menu {
	max-width: 400px;
	margin: 0 auto;
	padding: 0;
}

.menu a {
  display: block;
  padding: 10px;
	text-decoration: none;
	color: #000;
  line-height: 1;
}

label {
  display: block;
  margin: 0 0 2px 0;
	padding :12px;
  line-height: 1;
	color :#fff;
  background :#007bbb;
	cursor :pointer;
}

input {
	display: none;
}

.menu ul {
	margin: 0;
	padding: 0;
  background :#f4f4f4;
	list-style: none;
}

.menu li {
  max-height: 0;
  overflow-y: hidden;
  -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
	max-height: 46px;
  opacity: 1;
}

～現在の動き～
MENU01を押すとMENU01内容が表示する
MENU01が開いているときにMENU02を押すとMENU01が閉まりMENU02の内容が表示される

上記の動きに加え以下の動作も加えたい
MENU01を押すとMENU01内容が表示される
MENU01をもう一度押すとMENU01が閉まる

※CSSのみで実装を考えております。

ご教示お願い致します。

Answer 1

例えばこんなかんじでやればできますが、ホントにやる意味があるかどうかは疑問

input[type=radio].accordion:not(:checked)+label{
display:none;
}
input[type=radio].accordion:checked+label+label{
display:none;
}

input[type=radio].accordion:checked+label+label+ul{
display:block;
}
input[type=radio].accordion:not(:checked)+label+label+ul{
display:none;
}

<input type="radio" name="radio" id="menu_bar00" class="accordion" />
<div class="menu">
    <input type="radio" name="radio" id="menu_bar01" class="accordion" />
    <label for="menu_bar00" class="open">MENU01o</label></label>
    <label for="menu_bar01" class="close">MENU01c</label></label>
    <ul id="links01">
        <li><a href="">Link1-01</a></li>
        <li><a href="">Link1-02</a></li>
        <li><a href="">Link1-03</a></li>
        <li><a href="">Link1-04</a></li>
    </ul>
    <input type="radio" name="radio" id="menu_bar02" class="accordion" />
    <label for="menu_bar00" class="open">MENU02o</label>
    <label for="menu_bar02" class="close">MENU02c</label>
    <ul id="links02">
        <li><a href="">Link2-01</a></li>
        <li><a href="">Link2-02</a></li>
        <li><a href="">Link2-03</a></li>
        <li><a href="">Link2-04</a></li>
    </ul>
</div>

よくみたらkei344さんとほぼ同じ感じですね

Comments

[isseidayo]

ありがとうございました。
こちらの方法で実装が可能になりました。
また一つお勉強になりました。

[yambejp]

すみません、検証用につけたopen,closeクラスは使ってないので意味ないです
ラベルの文字も微妙に調整入っていますが、同じモノでもよいでしょう

[isseidayo]

こちらで問題ありません。ラベルの文字は異なった方が仕組みがどのようになっているのかがとてもわかりやすかったです。こちらを参考に実装致します。ありがとうございました。

Answer 2

CSSは書きませんがHTMLはこうすれば応用できます。

<div class="menu">
    <input type="radio" name="radio" id="menu_bar00" class="accordion" />
    <input type="radio" name="radio" id="menu_bar01" class="accordion" />
    <label for="menu_bar01">MENU01</label>
    <label class="hidden" for="menu_bar00">MENU01</label>
    <ul id="links01">
        <li><a href="">Link01</a></li>
        <li><a href="">Link02</a></li>
        <li><a href="">Link03</a></li>
        <li><a href="">Link04</a></li>
    </ul>
    <input type="radio" name="radio" id="menu_bar02" class="accordion" />
    <label for="menu_bar02">MENU02</label>
    <label class="hidden" for="menu_bar00">MENU02</label>
    <ul id="links02">
        <li><a href="">Link01</a></li>
        <li><a href="">Link02</a></li>
        <li><a href="">Link03</a></li>
        <li><a href="">Link04</a></li>
    </ul>
</div>

Comments

[isseidayo]

ご回答ありがとうございました。
https://codepen.io/takanorip/pen/mExJOZ
こちらのサイトで上記のソースを入れてみましたが
MENU01が重複してしまいます。
class="hidden"は以下のCSSをいれてみましたが思うような動作にはなりませんでした。
.hidden {
visibility:hidden;
display:none;
}

Answer 3

どのような理由があっての「CSSオンリー」なのでしょうか。

コードを見ての通り、この実装は内部的にラジオボタンを使って実装しています。そして、ラジオボタンの「チェックされた」「されていない」をアコーディオンが「開いた」「閉じた」として表現している、という寸法です。

ところが、JavaScriptを使わないラジオボタン単体では全部からチェックを外す方法がないので、このアコーディオンも、「一度開けばどれかが開いたまま」ということになります。

理論上、CSSはチューリング完全とのことで、CSSだけでマインスイーパーを作った例もありますが、本来想定した使い方ではないので、「閉じられるアコーディオン」の実装も、必要以上に迂遠で難解なものになることが予想されます。

Comments

[isseidayo]

ご回答ありがとうございます。
確かに現在ラジオボタンになっております。これをチェックボックスに切り替えると開いたままになってしまいます。
なぜ、CSSオンリーかと申しますと、スマホでモーダルの上でアコーディオンメニューを実装させようとしていますが、Javascriptの上でJavascriptがうまく動きません。
そこでアコーディオンメニューをCSSオンリーに切り替えました。。。

[maisumakun]

JavaScriptで生成したものといっても、HTMLはHTMLなので、適切にハンドリングすればJavaScriptを適用させることもできます（モーダル表示のライブラリに、「表示直後のコールバック」とかそういうのはありませんか？）。

[isseidayo]

お世話になります。モーダルウィンドウは下記のサイトのものを実装しています。
https://syncer.jp/jquery-modal-window
私自身Javascriptがわかりません。素人で申し訳ありません。
表示後のコールバックにつてもわかりません。