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

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:

  

    

    

      
101
    
    
extra
    

    

      
102
      
7
    
    
LQ
    

    

      
101
      
6
    
    
L4
    

    

      
7
      
4
    
    
L3
    

    

      
6
      
3
    
    
L2
    

    

      
4
      
1
    
    
R1
    

    

      
3
      
2
    
    
W2
    

    

      
1
      
5
    
    
WQ
    

    

      
2
      
100
    
    
extra
    

    

      
5