如何在选中单选按钮后获取第一个 div

Question

我正在尝试制作手风琴，但我被困在拼图的最后一块。

我需要在单选按钮之后折叠所有未选中的 div。只有选中的单选按钮后的 div 应该可见。但它不起作用。这是我的html

<input type="radio" name="alert" id="overzicht" class="accordion">
        <label for="overzicht">
          > Overzicht
        </label>
        <div class="accordionPanel">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>

        <input type="radio" name="alert" id="categorie" class="accordion">
        <label for="categorie">
           > Selectie op categorie
        </label>
        <div class="accordionPanel">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>

这是css

input.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

input[name=alert] ~ .accordionPanel {
    max-height: 0;
    overflow: hidden;
}

input[name=alert]:checked .accordionPanel {
    max-height: 250px;
    -webkit-transition: max-height .3s ease-in-out;
    -moz-transition: max-height .3s ease-in-out;
    -o-transition: max-height .3s ease-in-out;
    transition: max-height .3s ease-in-out;
}

Answer 1

使用这个：

input[name=alert]:checked + label + .accordionPanel {

而不是input[name=alert]:checked .accordionPanel

请看下面的演示：

input.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

input[name=alert]~.accordionPanel {
  max-height: 0;
  overflow: hidden;
}

input[name=alert]:checked+label+.accordionPanel {
  max-height: 250px;
  -webkit-transition: max-height .3s ease-in-out;
  -moz-transition: max-height .3s ease-in-out;
  -o-transition: max-height .3s ease-in-out;
  transition: max-height .3s ease-in-out;
}

<input type="radio" name="alert" id="overzicht" class="accordion">
<label for="overzicht">
          > Overzicht
        </label>
<div class="accordionPanel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<input type="radio" name="alert" id="categorie" class="accordion">
<label for="categorie">
           > Selectie op categorie
        </label>
<div class="accordionPanel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>