css toggle acodion with radio buttons

by jpeter06

HTML

<input type="radio" name="gender" id="toggle-1">
<label for="toggle-1">toggle 1
  <ul>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
  </ul>
</label>
<input type="radio" name="gender" id="toggle-2">
<label for="toggle-2">toggle 2
  <ul>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
  </ul>
</label>
<input type="radio" name="gender" id="toggle-3">
<label for="toggle-3">toggle 3
  <ul>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
  </ul>
</label>

CSS

html,body{position:relative;width:100%;height:100%;padding:0px;margin:0px;background:tan;}

label:nth-child(2){  background:red;}
label:nth-child(4){background:blue}
label:nth-child(6) {background:orange}
label{display:block;transition: all 1s;
max-height:20px; overflow:hidden;
position:relative; top:0px;left:0px}

input { display: none;} /* para aceptar click*/
input:checked + label { background:green; 

max-height:200px;}