1028–Folder Selection Panel

Background

We want to create a folder-selection panel.

Requirement

Here is what we want:

• The folder can be toggled on and off.
• At any time, only 1 file is allowed for selection.

Given the following HTML:

<ul class='folder-list'>
  <li><input type='checkbox' id='folder1'><label for='folder1'>Folder A</label>
    <ul>
      <li><input type='radio' name='file' id='file1'><label for='file1'>abc.png</label></li>
      <li><input type='radio' name='file' id='file2'><label for='file2'>doodle.html</label></li>
      <li><input type='radio' name='file' id='file3'><label for='file3'>progress.xls</label></li>
      <li><input type='radio' name='file' id='file4'><label for='file4'>sample.txt</label></li>
    </ul>
  </li>
  <li><input type='checkbox' id='folder2'><label for='folder2'>Images Folder</label>
    <ul>
      <li><input type='radio' name='file' id='file5'><label for='file5'>aaaa.png</label></li>
      <li><input type='radio' name='file' id='file6'><label for='file6'>garden.png</label></li>
      <li><input type='radio' name='file' id='file7'><label for='file7'>queen.png</label></li>
      <li><input type='radio' name='file' id='file8'><label for='file8'>zoo.png</label></li>
    </ul>
  </li>
</ul>
<!-- folder icon: -->
<!-- https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/folder-closed.png -->
<!-- https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/folder-opened.png -->

Please write the CSS to implement the effect.