Есть набор 4-х блоков. Нужно чтобы при выборе определенного checkbox открывался только соответствующий ему блок. Сейчас при выборе любого checkbox открываются сразу все. Как этого збежать? Можно ли это сделать только css&?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
.data1{display: none; height: 100px; width: 100px; background: #E40B0F;}
.data2{display: none; height: 100px; width: 100px; background: #000;}
.data3{display: none; height: 100px; width: 100px; background: #0034FF;}
.data4{display: none; height: 100px; width: 100px; background: #00FF3C;}
[type=checkbox]:checked~.data1{display: block;}
[type=checkbox]:checked~.data2{display: block;}
[type=checkbox]:checked~.data3{display: block;}
[type=checkbox]:checked~.data4{display: block;}
</style>
</head>
<body>
<input type="checkbox" id="data1" name="data1" class="data"><br>
<input type="checkbox" id="data2" name="data2" class="data"><br>
<input type="checkbox" id="data3" name="data3" class="data"><br>
<input type="checkbox" id="data4" name="data4" class="data"><br>
<div class="data1">data1</div>
<div class="data2">data2</div>
<div class="data3">data3</div>
<div class="data4">data3</div>
</body>
</html>
Простой
Средний
