如何在选中的单选按钮后获取第一个 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>

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

How to get the first div after a checked radio button

html

css

accordion

css-selectors

radio