CODEWITHSUNDEEP
htmlcsscheckbox
Adam Silva
Adam Silva

Reputation: 1047

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.

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

Upvotes: 0

Views: 513

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

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>

Upvotes: 1

Related Questions