Checkbox Hide one div when I click on another checkbox - html

Question

I'm sure there is a simple solution. I have two labels associated with two checkboxes, and each of them shows their corresponding div. The thing is I have to hide div1 when I click on checkbox2 and show div2, and vice-versa.
/* Default State */
.hombres, .mujers{
display: none;
}
/* Toggled State */
input[type=checkbox]#hombre:checked ~ div.hombres {
display:block;
background-color: #f04e10;
}
input[type=checkbox]#mujer:checked ~ div.mujers {
display:block;
background-color: #f04e10;
}
input[type=checkbox]#hombre:checked ~ div.mujers {
display: none;
}
input[type=checkbox]#mujer:checked ~ div.hombres {
display: none;
}
<label for="hombre">Hombre</label>
<input type="checkbox" id="hombre">
<label for="mujer">Mujer</label>
<input type="checkbox" id="mujer">
<div class="hombres"><p>Hombre</p></div>
<div class="mujers"><p>Mujer</p></div>
Any idea?

Answer 1

Change the checkboxes to radio buttons with the same name like this: jsfiddle.net
/* Default State */
.hombres, .mujers{
display: none;
}
/* Toggled State */
input[type=radio]#hombre:checked ~ div.hombres {
display:block;
background-color: #f04e10;
}
input[type=radio]#mujer:checked ~ div.mujers {
display:block;
background-color: #f04e10;
}
input[type=radio]#hombre ~ div.mujers {
display: none;
}
input[type=radio]#mujer ~ div.hombres {
display: none;
}
<label for="hombre">Hombre</label>
<input type="radio" id="hombre" name="demo">
<label for="mujer">Mujer</label>
<input type="radio" id="mujer" name="demo">
<div class="hombres"><p>Hombre</p></div>
<div class="mujers"><p>Mujer</p></div>