当我打开一个标签时，如何关闭所有活动标签？[关闭]

Question

封闭. 这个问题需要更多 集中. 目前不接受回答。

---

想要改进这个问题？ 请通过以下方式更新问题，使其只关注一个问题。编辑本帖.

封闭 19天前.

改进这个问题

我在没有javascript的情况下创建了一个可折叠的小部件，你可以在这里看到HTML & CSS代码。

``` https://codepen.io/lilyferli/pen/pogoRvy ```

所以我的问题是，当一个标签打开时，是否可以关闭所有其他标签？ 如果可以，我应该添加什么代码？

如果可以，我应该添加什么代码？

Answer 1

也许这样做;)

body {
  color: #2c3e50;
  background: #ecf0f1;
  padding: 0 1em 1em;
}

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tabs {
  overflow: hidden;
}

.tab {
  width: 100%;
  color: white;
  overflow: hidden;
}

.tab-label {
  display: flex;
  padding: 1em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;
}

.tab-label:hover {
  background: #1a252f;
}

.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all .35s;
}

input:checked+.tab-label {
  background: #1a252f;
}

input:checked~.tab-content {
  max-height: 100vh;
  padding: 1em;
}

<div class="tabs">
  <div class="tab">
    <input type="radio" id="rd1" name="el">
    <label class="tab-label" for="rd1">ITEM 1</label>
    <div class="tab-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, optio deleniti autem porro delectus esse perferendis facilis, illo voluptate quidem ducimus cupiditate eligendi pariatur corrupti qui repellat, magni quas itaque?
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="rd2" name="el">
    <label class="tab-label" for="rd2">ITEM 2</label>
    <div class="tab-content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere obcaecati, ea molestiae placeat ducimus sed cupiditate tenetur accusamus, quod eaque? Eaque rerum tenetur quidem quo nesciunt, labore totam eligendi!
    </div>
  </div>
</div>