Collapsible trees with CSS

Using CSS make collapsible trees has a certain appeal to it.

.treeview {
    list-style: none;
}

.treeview li {
    position: relative;
}

.treeview input:checked + ul {
    display: none;
}

.treeview input {
    position: absolute;
    left: -1.6em;
    margin: 0;
    margin-top: 2px;
    padding: 0;
    width: 1em;
    border: 0;
}

And the HTML is recursively generated by:

drawHierarchy :: Forest Area -> Html
drawHierarchy areas = ul ! class_ "treeview" $
  forM_ areas $ \ (Node area children) -> li $ do
      toHtml (_areaName area)
      if null children
      then input ! type_ "checkbox" ! disabled "disabled"
      else input ! type_ "checkbox"
      drawHierarchy children