選擇不同的標簽后，如何使CSS手風琴折疊？

Question

我將純CSS選項卡與純CSS手風琴結合在一起。 以下是來源：

手風琴： https : //codepen.io/raubaca/pen/PZzpVe
標簽： https ： //css-tricks.com/css3-tabs/

我在第一個選項卡上有一個純CSS手風琴。 問題是當在第一個選項卡中打開手風琴並選擇另一個選項卡時，用戶可以在下面看到打開的手風琴。 選擇另一個標簽后，如何折疊手風琴？

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

<div class="w3c">
<div id="tab16">
<a 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 href=""><img src="../images/classroom1.png"></a>
          <a href=""><img src="../images/document1.png"></a>
          <a href=""><img src="../images/presentation1.png"></a>
          <a 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 href="#tab17">Tab 17</a>
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18">
<a href="#tab18">Tab 18</a>
<div>... that 2 should have been enough, but...</div>
</div>
</div>

Answer 1

使用輸入類型單選而不是復選框。

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

您可以在此處查看示例： https : //codepen.io/raubaca/pen/PZzpVe

干杯。