チェックボックスにチェックを入れると、それに対応した画像を表示するプログラムを作っています。
しかし現在の書き方だと、表示した画像の上に、次チェックを入れた時に対応した画像が前回の処理で表示された画像の上に表示されてしまい不都合です。
うまくやる方法を探しているのですが、、、
==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;
}