Checkbox Hide one div when I click on another checkbox

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.

This is my css:

input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label { 
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* 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;
}

This is my HTML:

<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?