CODEWITHSUNDEEP
htmlcss
xms
xms

Reputation: 437

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.

Upvotes: 4

Views: 1293

Answers (2)

Wayne Allen
Wayne Allen

Reputation: 1735

You need to navigate the document hierarchy correctly in your CSS. So this works:

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

#someID-1:checked + div div {
    display:block;
}

Upvotes: 0

mmativ
mmativ

Reputation: 1414

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>

Upvotes: 2

Related Questions