CSS手风琴过渡

Question

我有一个可与CSS切换配合使用的手风琴， 如何添加过渡呢？ 下面的CSS是触发内容显示的原因，我希望它随着CSS过渡而下滑：

.toggle-content {
    color: Black;
    font-family: monospace;
    font-size: 16px;
    margin-bottom: 1.5em;
    padding: 1em;
    border: 1px solid black;
    margin-top: -5px;
    background: white;
    border-radius: 0px 0px 5px 5px;
  }

  .toggle-input {
    display: none;
  }
  .toggle-input:not(checked) ~ .toggle-content {
    display: none;
  }

  .toggle-input:checked ~ .toggle-content {
    display: block;
  }
  .toggle-input:checked ~ .toggle-label:after {
    content: '-';
  }

我一直在尝试使用max-height和线性过渡，但是似乎这可能是Javascript选项，也许不是吗？

我不一定要使用Javascript解决方案，因为我为此手风琴坚持了CSS切换。有解决办法吗？

另一个问题是在给定时间只能打开一个内容。因此，单击新标签后，我需要在CSS切换器中关闭某些内容。

以下是我对此的html：

<div class="toggle">
  <!-- Checkbox toggle -->
  <input
    type="checkbox"
    value="selected"
    id="simple-chart"
    class="toggle-input"
  />
  <label for="simple-chart" class="toggle-label">Simple Chart</label>

  <!-- Content to toggle -->
  <div role="toggle" id="simple-chart" class="toggle-content disabled">
    <!-- content -->
  </div>
</div>