CSS and hiding/showing divs when radio button checked

Question

If the radio button #my102 is checked, the div #navi102 should be visible and all other #navi??? divs should be hidden. So, if the radio button #my7 is checked, the div #navi7 s

Answer 1

1. You have errors in your html. There's </span>, but I can't find any opening of that tag.
2. Page looks like broken. It's sooo width and empty space looks strange...

Maybe you want that, I'm just saying. That's the reason why I'll write it on simple example, not whole your code (which's hard to read and result hard to check).

#content1
{
    display:none;
}

#content2
{
    display:none;
}

#toggle1:checked ~ #content1
{
  display: block;
}

#toggle2:checked ~ #content2
{
  display: block;
}

<input type=radio id="toggle1" name="toggle">Toggle1
<input type=radio id="toggle2" name="toggle">Toggle2

<br><br>

<span id="content1">Content1</span>
<span id="content2">Content2</span>

Let's start from html. There is one important thing. input and span share the same parent in the document tree. Why it's important? Because of general sibling combinator in css.

Ok, now css.

Firstly I'm creating "starting state". #content1 and #content2 are invisible, just as you want. (I could write in css #content1, #content2 { display:none; }, that doesn't matter.)

Secondly I'm making that magic what you're trying to do. I'm using just id and it should be enough. You were using + in css, I've used ~. In my opinion – it's better when you're using element id. Even when + enough.

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

Quote from developer.mozilla.org

More at w3.org – general sibling combinators

Answer 2

Here is my own solution.

CSS:

.list {
}

.opt ~ .list {
  display: none;
}

.opt:checked ~ .list {
  display: block;
}

input[type="radio"]#my1:checked + div #navi1 { display: block; }
input[type="radio"]#my2:checked + div #navi2 { display: block; }
input[type="radio"]#my3:checked + div #navi3 { display: block; }
input[type="radio"]#my4:checked + div #navi4 { display: block; }
input[type="radio"]#my5:checked + div #navi5 { display: block; }
input[type="radio"]#my6:checked + div #navi6 { display: block; }
input[type="radio"]#my7:checked + div #navi7 { display: block; }
input[type="radio"]#my99:checked + div #navi99 { display: block; }
input[type="radio"]#my100:checked + div #navi100 { display: block; }
input[type="radio"]#my101:checked + div #navi101 { display: block; }
input[type="radio"]#my102:checked + div #navi102 { display: block; }

HTML:

<div id="chart" style="white-space: nowrap; position: relative; text-align: center;">
  <div style="display: inline-block">
    <!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my102" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi102">
      <div style="z-index:100;position:fixed;right:0;top:50px">101</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my101" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi101">
      <div style="z-index:100;position:fixed;left:0;top:100px">102</div>
      <div style="z-index:100;position:fixed;right:0;top:100px">7</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">LQ
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my7" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi7">
      <div style="z-index:100;position:fixed;left:0;top:150px">101</div>
      <div style="z-index:100;position:fixed;right:0;top:150px">6</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L4
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my6" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi6">
      <div style="z-index:100;position:fixed;left:0;top:200px">7</div>
      <div style="z-index:100;position:fixed;right:0;top:200px">4</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L3
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my4" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi4">
      <div style="z-index:100;position:fixed;left:0;top:250px">6</div>
      <div style="z-index:100;position:fixed;right:0;top:250px">3</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L2
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my3" class="opt" /><div class="list" style="float:left;width:0">
    <div id="navi3">
      <div style="z-index:100;position:fixed;left:0;top:300px">4</div>
      <div style="z-index:100;position:fixed;right:0;top:300px">1</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">R1
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my1" class="opt" checked="checked" /><div class="list" style="float:left;width:0">
    <div id="navi1">
      <div style="z-index:100;position:fixed;left:0;top:350px">3</div>
      <div style="z-index:100;position:fixed;right:0;top:350px">2</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">W2
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my2" class="opt" /><div class="list" style="float:right;width:0">
    <div id="navi2">
      <div style="z-index:100;position:fixed;left:0;top:400px">1</div>
      <div style="z-index:100;position:fixed;right:0;top:400px">5</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:350px">WQ
    </div><!--
    --><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my5" class="opt" /><div class="list" style="float:right;width:0">
    <div id="navi5">
      <div style="z-index:100;position:fixed;left:0;top:450px">2</div>
      <div style="z-index:100;position:fixed;right:0;top:450px">100</div>
    </div>
    </div></DIV><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><input name="case" type="radio" id="my100" class="opt" /><div class="list" style="float:right;width:0">
    <div id="navi100">
      <div style="z-index:100;position:fixed;left:0;top:500px">5</div>
    </div>
    </div><!--

    --><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
    </div>

    <div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
    </div>
  </div>
</div>

Answer 3

Creating a minimal version of the code helps a great deal in this situation - your code seems to be right, but it's difficult to troubleshoot with so much going on:

https://jsfiddle.net/17jaf4un/4/

HTML:

<div>
  <input type="checkbox" id="ch1" />
  <div>
    <div id="d1">first</div>
  </div>
  <input type="checkbox" id="ch2" />
  <div>
    <div id="d2">second</div>
  </div>
</div>

CSS:

input#ch1:checked + div #d1 {
  border: 1px solid red;
}

input#ch2:checked + div #d2 {
  border: 1px solid blue;
}