😺
cssだけでトグルを実装する
背景
WordPressのサイトを作っていて、ふとトグル（クリックしたら展開するやつ）を実装したいなと思ったんですが、そのためだけにJSを用意しないといけないのがめんどくさいなぁと思ったので、CSSだけで実装する方法を探しました。
次同じようなことする時に忘れていそうなので備忘録的に描いておくことにします。
コード
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#toggle1{
display: none;
}
.toggle-inner{
display: none;
}
#toggle1:checked ~ .toggle-inner{
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle1">
<div class="toggle-outer">
<label for="toggle1">クリックして開く▼</label>
</div>
<div class="toggle-inner">
<hr>
<p>長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章</p>
</div>
</body>
</html>
説明
- checkbox(id:toggle1)、toggle-outer、toggle-innerという順番に要素を記述
- toggle-outer:展開・折りたたみをしないエリア
- toggle-inner:展開・折りたたみをするエリア
- toggle-inner配下へ、展開後に表示するコンテンツを用意してdisplay:noneを当てておく
- checkboxがチェックありの場合のみ、toggle-innerがdisplay:blockになるようにする
-
#toggle1:checked ~ .toggle-innerで「checkbox(チェック有り)の後ろにあるtoggle-inner」にだけスタイルを適用するという指定ができる（参考：E ~ F－CSS3リファレンス http://www.htmq.com/selector/precede.shtml）
-
Discussion