1

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 should be visible and all other #navi? divs hidden.

How could I do that?

CSS code:

.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 code:

<div id="chart" style="white-space: nowrap; position: relative; text-align: center;">
  <div style="display: inline-block">
    <!--
    --><input name="case" type="radio" id="my102" class="opt" /><div class="list" style="float:left;width:70px">&nbsp;
    <div id="navi102">
      <div style="z-index:100;position:fixed;right:0;top:50px">101</div>
    </div>
    </div><div style="display: inline-block;vertical-align:top;width:70px">extra
    </div><!--
    --><input name="case" type="radio" id="my101" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <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 style="display: inline-block;vertical-align:top;width:350px">LQ
    </div><!--
    --><input name="case" type="radio" id="my7" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <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 style="display: inline-block;vertical-align:top;width:350px">L4
    </div><!--
    --><input name="case" type="radio" id="my6" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <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 style="display: inline-block;vertical-align:top;width:350px">L3
    </div><!--
    --><input name="case" type="radio" id="my4" class="opt" /><div class="list" style="float:left;width:350px">&nbsp;
    <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 style="display: inline-block;vertical-align:top;width:350px">L2
    </div><!--
    --><input name="case" type="radio" id="my3" class="opt" /><div class="list" style="float:left;width:350px">
    <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 style="display: inline-block;vertical-align:top;width:350px">R1
    </div><!--
    --><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 style="display: inline-block;vertical-align:top;width:350px">W2
    </div><!--
    --><input name="case" type="radio" id="my2" class="opt" /><div class="list" style="float:right;width:350px">&nbsp;
    <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 style="display: inline-block;vertical-align:top;width:350px">WQ
    </div><!--
    --><input name="case" type="radio" id="my5" class="opt" /><div class="list" style="float:right;width:350px">&nbsp;
    <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</span></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:70px">&nbsp;
    <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>
xms
  • 429
  • 5
  • 24

4 Answers4

6
  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

Sylogista
  • 565
  • 3
  • 10
2

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;
}
Toby
  • 12,743
  • 8
  • 43
  • 75
0

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>
xms
  • 429
  • 5
  • 24
0

Here's my proposition which is basically a slightly improved version of Sylogista's answer.

  • HTML :
<div name="tab-container">
    <!-- tabs -->
    <input type="radio" name="tab" id="tab1" label="Tab 1">
    <input type="radio" name="tab" id="tab2" label="Tab 2">

    <!-- tabs content containers -->
    <div id="content1" class="tab-content"></div>
    <div id="content2" class="tab-content"></div>
</div>
  • CSS :
/* display contents */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

/* hide contents */
#tab1:checked ~ .tab-content:not(#content1),
#tab2:checked ~ .tab-content:not(#content2) {
  display: none;
}

The main difference is that the css definitions for hiding and showing tab contents are only defined one time.

The showing part is almost identical while the hiding part use a more advanced combination of selectors for its right part.

This more advanded combination works as follow: whith the .tab-content class we select all the tab contents while with :not(#id) we exclude from that selection the tab content element that is displayed and should not be hidden from the hiding rule.

You could also hide contents in an easiest way by simply copying and modifying the rules used to show them like this :

/* hide contents */
#tab1 ~ #content1,
#tab2 ~ #content2 {
  display: none;
}

Modifications are the change of the display value and the removal of the :checked selector on the tabs id's.

This way all tabs contents visible and hidden states are linked to the checked state of their related tab.

If you want to try it there is this codepen whith some more explanations.

Darkosphere
  • 107
  • 8