Флажок Скрыть один div, когда я нажму на другой флажок

Question

Я уверен, что есть простое решение. У меня есть две метки, связанные с двумя флажками, и каждый из них показывает свой соответствующий div. Дело в том, что я должен скрыть div1, когда я нажимаю на checkbox2 и показываю div2, и наоборот.

/* 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>

Любая идея?

Answer 1

Измените флажков радиокнопок с таким же названием, как это:
^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>