xms xms - 5 months ago 13
CSS Question

Displaying div if radio button is checked

I have a radio button which id is

someID-1
and a div which id is
navi1
.

<input name="nappi" type="radio" id="someID-1" />

<div>&nbsp;
<div id="navi1">
<div style="z-index:100;position:fixed;right:0;top:0;bottom:0;">
<label for="someID-2">2</label>
</div>
</div>
</div>


This CSS code works just fine:

div[id^="navi"] {
display: none;
}


But this does not work OK:

input#someID-1:checked #navi1 {
display: block;
}


How should I modify the code?

I have tens of radio buttons (id names between
someID-1
and
someID-99
). I would like to have dynamic code.

I do not want to use JavaScript.

Answer

You can make like this. you can read the details of the selector that i used here

#navi1{
  display: none;
}
input[type="radio"]#someID-1:checked + div #navi1{
 display: block;
}
.box{
  border: 1px solid #ddd;
  width: 200px;
  height: 200px;
  text-align: center;
}
<input name="nappi" type="radio" id="someID-1" />

<div class="box">&nbsp;
  <div id="navi1">
    <div>
      <label for="someID-2">2</label>
    </div>
  </div>
</div>

Comments