1. There seems to be some errors in your HTML code, such as a missing opening tag for the </span>.
2. The page appears broken with excessive width and odd empty spaces.

Perhaps you would like a simpler explanation. This is why I will provide a basic example instead of analyzing your entire complex code, which can be difficult to comprehend and troubleshoot.

#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 focus on the HTML structure first. There is a crucial detail to note - both the input and span elements share the same parent in the document tree. Why is this important? It relates to the general sibling combinator in CSS.

Next, let's delve into the CSS portion.

To begin, I establish the initial state where #content1 and #content2 are hidden, meeting your requirement. (Although I could simply write

#content1, #content2 { display:none; }

Subsequently, I implement the functionality you desire using element IDs only. You were previously using the + symbol in CSS, whereas I opted for the ~ symbol. In my view, utilizing element IDs is preferable over the + symbol.

The ~ combinator separates two selectors and matches the second element if it follows the first and they have a common parent.

Quoted from developer.mozilla.org

Learn more at w3.org – general sibling combinators

When faced with a complex code that's difficult to troubleshoot, creating a simplified version can make all the difference:

Check out this minimal version of the code

Below is the HTML snippet:

<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>

And here is the CSS snippet:

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

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

Here's a unique solution I came up with.

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="..."
    ...
    ...(remaining HTML code to be displayed)
    ...
    ...
    ... 
  </div>
</div>

Presenting my proposal, an enhanced version of Sylogista's response.

• 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 key improvement here is that the css definitions for hiding and showing tab contents are consolidated into one concise set.

The showing mechanism remains largely unchanged while the hiding functionality utilizes a more sophisticated combination of selectors for increased efficiency.

This advanced selection process operates as follows: using the .tab-content class to target all tab contents, while excluding the displayed tab content element by utilizing :not(#id), preventing it from being hidden according to the hiding rule.

Alternatively, you can simplify the hiding of contents by duplicating and adjusting the rules used for displaying them, like so:

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

Changes include altering the display property value and eliminating the need for the :checked selector on the tabs' IDs.

This approach ensures that the visibility states of all tab contents are directly linked to the checked state of their associated tab.

If you wish to experiment with this concept, feel free to explore this codepen which offers additional explanations.