CSS - show div when select is checked - html

Question

I'm trying to show div when one of the selects in group is checked and hide when not. I thought this should work, but it's not working.
https://jsfiddle.net/47ctm349/2/
#form-group-osobko {
display: none;
}
#odber-1:checked+#form-group-osobko {
display: block;
}
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1"> Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2"> Hotově při osobním odběru
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3"> Platba předem na účet
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
It should work when you click the checkbox in the middle, the div id="form-group-osobko" should appear.
I was trying not to use JS with my bootstrap.
Can't get my head around what I'm doing wrong :(
Thanks.

Answer 1

Your solution only works, if the div to be displayed is an adjacent sibling of the checkbox input, as that is what the + selector in CSS means.
If this div is neither a sibling nor a child you can't select it with CSS and will have to use JavaScript.
#form-group-osobko {
display: none;
}
#odber-1:checked+#form-group-osobko {
display: block;
}
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
</label>
</div>
</div>
</div>
Here would be a simple jQuery solution, using just an additional class to display the div:
$('#odber-1').change(function(){
$('#form-group-osobko').toggleClass("active");
});
#form-group-osobko {
display: none;
}
#form-group-osobko.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>

Answer 2

Get it https://jsfiddle.net/47ctm349/5/
I just added Javascript, using Jquery. It works for any div anywhere:
$('#odber-0').on('change', function(){
if($('#odber-0').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
$('#odber-1').on('change', function(){
if($('#odber-1').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
$('#odber-2').on('change', function(){
if($('#odber-2').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
In your case no ideas with CSS.
Good luck!