Html 如何让响应标签在小屏幕上表现得像真正的手风琴

我创建了只使用CSS的标签，这些标签在小屏幕上会变成手风琴

HTML:

当第一个选项卡打开时，用户必须向下滚动到下一个选项卡，如果该选项卡包含大量内容，这可能是一种负面体验。因此，我希望能够像普通的手风琴元素一样关闭选项卡，以便更容易跳转到下一个元素

我需要做哪些更改来添加“真实”手风琴的行为，即单击选项卡标题时，选项卡应关闭

<div class="dc-tabs">
  <input type="radio" name="tabs" id="tabone" checked="checked">
  <label for="tabone">Tab One</label>
  <div class="dc-tab">
    <h1>Tab One Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  
  <input type="radio" name="tabs" id="tabtwo">
  <label for="tabtwo">Tab Two</label>
  <div class="dc-tab">
    <h1>Tab Two Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  
  <input type="radio" name="tabs" id="tabthree">
  <label for="tabthree">Tab Three</label>
  <div class="dc-tab">
    <h1>Tab Three Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

.dc-tabs {
    display: flex;
    flex-wrap: wrap;
}
.dc-tabs label {
    order: 1; 
    display: block;
    padding: 1rem 2rem;
    margin-right: 0.2rem;
    cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
}
.dc-tabs .dc-tab {
  order: 99; 
  flex-grow: 1;
    width: 100%;
    display: none;
  padding: 1rem;
  background: #fff;
}
.dc-tabs input[type="radio"] {
    display: none;
}
.dc-tabs input[type="radio"]:checked + label {
    background: #fff;
}
.dc-tabs input[type="radio"]:checked + label + .dc-tab {
    display: block;
}

@media (max-width: 45em) {
  .dc-tabs .dc-tab,
  .dc-tabs label {
    order: initial;
  }
  .dc-tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}