CSS - CheckBoxに基づいて要素を表示/非表示

Question

私は、チェックボックスを使って要素を表示したり非表示にしたりするプロジェクトを持っています。次のパターンは、https://jsfiddle.net/37bqmbuo/も参照してください。

HTML：

<input class="switch-1" type="checkbox"> 
<input class="switch-2" type="checkbox"> 
<input class="switch-3" type="checkbox"> 
<div class="hidden-1 hidden-2">Info 1</div> 
<div class="hidden-2 hidden-3">Info 2</div> 
<div class="hidden-1 hidden-3">Info 3</div> 
<div class="hidden-1">Info 4</div> 
<div class="hidden-3">Info 5</div> 

CSS：

.switch-1:checked ~ .hidden-1 
{ 
    display: none; 
} 

.switch-2:checked ~ .hidden-2 
{ 
    display: none; 
} 

.switch-3:checked ~ .hidden-3 
{ 
    display: none; 
} 

しかし、私が持っているより多くのオプションは、より多くのクラスは、私が作成する必要があります。これをCSSだけで実装するスマートな方法はありますか？

Answer 1

実際にはあります。

あなたがそうのように入力した後、ターゲットにしたい要素入れ：

<input type="checkbox" value="My Checkbox" /> 
<div class="toggle">Toggle me</div> 

と、いくつかのCSSの魔法を実行します。ここで

input:checked + .toggle { display: none; }