<label class="test" for="test"> <input type="checkbox" id="test"> <p>something</p> </label> <div class="bottom"> 省略 </div> <div class="detail"> 詳細 </div>
このコードをCSSだけで「.testをclickしたら.detailが表示、もう一回.testをclickで閉じる」機能を作成しようとする
.detail { display: none; } .test input{ display: none; } .test input:checked ~ .detail { display: block; }
としてみましたが、表示されません。
ちなみにinputはcheckedになるのを、display: blockにして目でみて確かめております
「~」は直後の要素ではなくても取ってこれると思うのですが、うまくいかずこまっております。
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。