相邻 CSS 个可折叠小部件

Question

我使用本教程 (https://alligator.io/css/collapsible/) 创建了 2 个可折叠小部件。我需要 header 标签在同一行上彼此相邻，并且可折叠部分占用两个 header 的长度，如图中所示。如何做到这一点？

我试过使用 position: absolute;，但是其中一个 header 仍然无法选择，并且它所包围的包含边框仍然不受其扩展的影响，这是一个问题。

另外，如果一个可折叠小部件打开，我该如何使另一个自动关闭？

Answer 1

您需要更改几项内容：

更改您的 HTML 结构。
默认勾选第一个radio，默认显示第一个tab内容。
在包装器元素中，将 display: grid 更改为 display: flex 和 wrap 内容
我对 CSS 做了很多必要的修改，所以请检查一下。

body {
  font-family: consolas;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input.collapse[type="radio"] {
  display: none;
}

.lbl-toggle {
  cursor: pointer;
  border: solid 1px #FAE042;
  transition: all 0.25s ease-out;
  order: 1;
  display: block;
  padding: .3rem 1rem;
  width: 50%;
  background-color: rgba(250, 224, 66, .2);
  font-weight: bold;
}

.lbl-toggle:hover {
  color: #000;
}

.lbl-toggle:first-of-type {
  border-top-left-radius: 7px;
}

.lbl-toggle:last-of-type {
  border-top-right-radius: 7px;
}

.collapsible-content {
  overflow: hidden;
  width: 100%;
  max-height: 0;
  order: 2;
  padding: 0 1rem;
  background-color: #FAE042;
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  display: inline-block;
}

.toggle:checked+.lbl-toggle {
  background-color: #FAE042;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 100%;
}

.collapsible-content th.head {
  padding: 6px 4px;
  font-size: small;
}

.collapsible-content td.data {
  padding: 6px 4px;
}

.lbl-toggle::after {
  content: " ";
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-left: 0.7rem;
  transition: transform 0.2s ease-out;
}

.toggle:checked+.lbl-toggle::after {
  transform: rotate(90deg);
}

.toggle:checked+.lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

<div class="wrapper">
  <input class="collapse toggle" id="#collapsible1" type="radio" name="collapsibleItem" checked/>
  <label for="#collapsible1" class="lbl-toggle">
        Header 1        
        </label>
  <div class="collapsible-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat.</p>
  </div>


  <input class="collapse toggle" id="#collapsible2" type="radio" name="collapsibleItem" />
  <label for="#collapsible2" class="lbl-toggle">
          Header 2          
        </label>
  <div class="collapsible-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et
      consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat. </p>
  </div>
</div>

对于第二个问题，您可以使用单选按钮而不是复选框。

<input id="collapsible1" name="collapsibleItem" class="toggle" type="radio">
<input id="collapsible2" name="collapsibleItem" class="toggle" type="radio">
<input id="collapsible3" name="collapsibleItem" class="toggle" type="radio">

input[type='radio'] {
  display: none;
}

请注意，所有收音机都具有相同的名称属性；当您检查一个新的无线电时，有必要取消标记当前标记的无线电。

相邻 CSS 个可折叠小部件

Adjacent CSS Collapsible Widgets

css

css-transforms

css-animations