CSS Accordeon ohne Javascript

<!DOCTYPE html>
<html>
<head>
   <title>Akkordeon mit CSS</title>
   <meta name="generator" content="BBEdit 13.0" />
<style>
.acc { width: 300px; margin: 1em auto}
.acc .choice {
   display: grid;
   grid-template-columns: 9fr 1fr;
   grid-template-areas: "name action"
                        "panel panel";
}

.acc label:nth-child(odd) { grid-area: name;}
.acc label:nth-child(even) { grid-area: action;}
.acc .panel { grid-area: panel; }
.acc input[name="ac"] { display:none }

.acc .panel {
  margin: 0;
  height: 0;
  overflow:hidden;
  background-color: hsla(12, 50%, 95%);
  line-height: 1.5;
  padding: 0 2rem;
  box-sizing: border-box;
  transition: 0.5s;
}

.acc .panel p { margin-top:0 }

.acc input.open:checked~.panel {
  height: auto;
  padding: 2rem;
  transition: 0.5s;
}

.acc label {
  cursor: pointer;
  background-color: hsl(12, 80%, 60%);
  border-bottom: 2px solid #fff;
  padding: 1em;
  width: 100%;
  font-weight: 400;
  font-size: 1.2em;
  box-sizing: border-box;
  z-index: 100;
  color:white;
}

.acc input.open:checked ~ label { background-color: hsl(12, 80%, 50%); }
.acc label:nth-child(odd)::after  { 
   content: "+";
   color: white;
   float:right;
   font-size: 1.2em;
   margin-top:0;
}
.acc input.open:checked ~ label:nth-child(odd)::after { content: ""; }
.acc input.open:checked ~ label.close::after { content: "– "; font-size: 1.2em; }
</style>
</head>

<body>
<div class="acc">          
   <div class="choice">
      <input type="radio" class="open" name="ac" id="Liq" >
      <input type="radio" class="close" name="ac" id="Liq-close">
      <label for="Liq"><b>❦</b> Liquorice</label>
      <label class="close" for="Liq-close"></label>
      <ul class="panel">
         <li>Liquorice wafer lollipop sesame</li>
         <li>snaps gummi bears. Wafer jelly beans chupa chups cotton candy</li>
         <li>caramels carrot cake topping oat cake.</li>
      </ul>
   </div>

   <div class="choice">
      <input type="radio" class="open" name="ac" id="Che">
      <input type="radio" class="close" name="ac" id="Che-close">
      <label for="Che"><b>❁</b> Cheesecake?</label>
      <label class="close" for="Che-close"></label>
      <ul class="panel">
         <li>Cake carrot cake marshmallow cheesecake cake lemon drops pudding apple pie.</li>
         <li>Chocolate gingerbread marshmallow croissant.</li>
      </ul>
   </div>

   <div class="choice">
      <input type="radio" class="open" name="ac" id="Fru">
      <input type="radio" class="close" name="ac" id="Fru-close">
      <label for="Fru"><b>❤</b> Fruitcake?</label>
      <label class="close" for="Fru-close"></label>
      <div class="panel">
         <p>Fruitcake marshmallow sugar plum soufflé biscuit.</p>
         <p>Sesame snaps pie lemon drops.</p>
      </div>
   </div>
</div>

</body>
</html>