How to get the first div after a checked radio but

问题:

I'm trying to make an accordion but I'm stuck at the last pice of the puzzle.

I need to collapse all NOT checked div right after radio buttons. Only the div after a checked radio button should be visible. But it's not working. This is my 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>

and this is the 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;
}

回答1:

Use this:

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

instead of input[name=alert]:checked .accordionPanel

See demo below:

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>