How do I make CSS accordions collapse when different tab is selected?

I have combined a pure CSS tab with a pure CSS accordion. Here are the sources:

Accordion: https://codepen.io/raubaca/pen/PZzpVe

Tabs: https://css-tricks.com/css3-tabs/

I have a pure CSS accordion on the first tab.
The problem is when the accordions are opened in the first tab and another tab is selected, the user can see the opened accordion underneath. How do I collapse the accordions when another tab is selected?

https://jsfiddle.net/Lance_Bitner/ybtqm1hq/

<div class="w3c">
<div id="tab16">
<a target="_blank" rel="nofollow" href="#tab16">Tab 16</a>
<div>    
  <div class="tab">
    <input id="tab-one" type="checkbox" name="tabs">
    <label for="tab-one">Introduction to SharePoint</label>
    <div class="tab-content">
      <div>
        <div class="column2">
          <a target="_blank" rel="nofollow" href=""><img src="../images/classroom1.png"></a>
          <a target="_blank" rel="nofollow" href=""><img src="../images/document1.png"></a>
          <a target="_blank" rel="nofollow" href=""><img src="../images/presentation1.png"></a>
          <a target="_blank" rel="nofollow" href=""><img src="../images/video1.png"></a>
        </div>
      </div>
    </div>
  </div>
  <div class="tab">
    <input id="tab-two" type="checkbox" name="tabs">
    <label for="tab-two">Label Two</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab">
    <input id="tab-three" type="checkbox" name="tabs">
    <label for="tab-three">Label Three</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
</div>
 </div>
<div id="tab17">
<a target="_blank" rel="nofollow" href="#tab17">Tab 17</a>
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18">
<a target="_blank" rel="nofollow" href="#tab18">Tab 18</a>
<div>... that 2 should have been enough, but...</div>
</div>
</div>

Use input type radio instead of checkbox.

<input id="tab-four" type="radio" name="tabs2">

You can see the example here: https://codepen.io/raubaca/pen/PZzpVe

Cheers.