如何使 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

干杯。