Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
チェックボックスにチェックを入れると、それに対応した画像を表示するプログラムを作っています。
しかし現在の書き方だと、表示した画像の上に、次チェックを入れた時に対応した画像が前回の処理で表示された画像の上に表示されてしまい不都合です。
うまくやる方法を探しているのですが、、、
==HTML==
<html> <link rel="stylesheet" type="text/css" href="force.css" /> <head> </head> <body> <div class="hidden_box"> <label for="label1">1階</label> <input type="checkbox" id="label1"/> <div class="hidden_show"> <!--非表示ここから--> <p><img src="a.jpg"></p> <!--ここまで--> </div> </div> <div class="hidden_box"> <label for="label2">2階</label> <input type="checkbox" id="label2"/> <div class="hidden_show"> <!--非表示ここから--> <p><img src="b.jpg"></p> <!--ここまで--> </div> </div> <div class="hidden_box"> <label for="label3">3階</label> <input type="checkbox" id="label3"/> <div class="hidden_show"> <!--非表示ここから--> <p><img src="c.jpg"></p> <!--ここまで--> </div> </div> <div class="hidden_box"> <label for="label4">4階</label> <input type="checkbox" id="label4"/> <div class="hidden_show"> <!--非表示ここから--> <p><img src="c.jpg"></p> <!--ここまで--> </div> </div> <div class="hidden_box"> <label for="label5">5階</label> <input type="checkbox" id="label5"/> <div class="hidden_show"> <!--非表示ここから--> <p><img src="c.jpg"></p> <!--ここまで--> </div> </div> <script> </script> </body> </html>==css==
.hidden_box {
margin: 2em 0;/前後の余白/
padding: 0;
}
/ボタン装飾/
.hidden_box label {
padding: 15px;
font-weight: bold;
border: solid 2px black;
cursor :pointer;
}
/ボタンホバー時/
.hidden_box label:hover {
background: #efefef;
}
/チェックは見えなくする/
.hidden_box input {
display: none;
}
/中身を非表示にしておく/
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0s;
}
/クリックで中身表示/
.hidden_box input:checked + .hidden_show {
padding: 10px 0;
height: auto;
position : absolute;
top:50;
left:100;
opacity: 1;
transition: 0.5s;
}
回答1件
0
こういうことでしょうか？
input[type=checkbox]+div.hidden_show{display:none;} input[type=checkbox]:checked+div.hidden_show{display:block;}
投稿2017/10/10 07:04
総合スコア114747
あなたの回答
tips
プレビュー
