TreeView

How to create a treeview-widget without Javascript.

HTML

<details data-widget="treeview">
  <summary>Excellence XC90 Campaign</summary>
  <ul>
    <li data-type="group">
      <details>
        <summary>Model</summary>
        <ul>
          <li data-type="group">
            <summary>Sub</summary>
          </li>
        </ul>
      </details>
    </li>
  </ul>
</details>
<details data-widget="treeview" open="true">
  <summary>VCIC 60 Year Campaign</summary>
  <ul>
    <li>Sales Catalog Root</li>
    <li data-type="group"><details><summary>Deposit</summary></details></li>
    <li>Common Items that work for all car models</li>
    <li data-type="group" open="true">
      <details>
        <summary>XC60 Configured Car</summary>
        <ul>
          <li>Each car in a campaign should reside in a category</li>
          <li data-type="group">
            <details>
              <summary>Car Model</summary>
            </details>  
          </li>
          <li>Car Model, must be unique identified by 3 digit code</li>
          <li data-type="group">
            <details>
              <summary>Engine</summary>
            </details>
          </li>
          <li>Engines for model, identified by a 2 digit code, additional filtering rules may exist against sales version</li>
          <li data-type="group">
            <details>
              <summary>Sales Version</summary>
            </details>
          </li>
          <li>For a campaign this is usually unique, identified by a 2 digit code</li>
          <li data-type="group">
            <details>
              <summary>Steering</summary>
            </details>
          </li>
          <li>Identified by a 1 digit code, must be unique for a market</li>
          <li data-type="group">
            <details>
              <summary>Transmission</summary>
            </details>
          </li>
          <li>Indentified by a 1 digit code, usally a close relation to engine, if this is the case a binding relation should exist to the engine and transmission should not be...

CSS

[data-widget="treeview"] {
  cursor: pointer;
}

[data-widget="treeview"] summary {
  padding-left: 18px;
  background-image: url("http://icons.iconarchive.com/icons/thvg/wood-folders/16/Glossy-Generic-icon.png");
  background-repeat: no-repeat;
}

[data-widget="treeview"][open] > summary,
[data-widget="treeview"] details[open] > summary {
  background-image: url("http://icons.iconarchive.com/icons/thvg/wood-folders/16/Glossy-Open-icon.png");
}

[data-widget="treeview"] li {
  margin-left: 1.5em;
}

[data-widget="treeview"] li:not([data-type="group"]) {
  padding-left: 18px;
  background-image: url("http://icons.iconarchive.com/icons/deleket/adobe-cs4/16/File-Adobe-Dreamweaver-CSS-01-icon.png");
  background-repeat: no-repeat;
}

[data-widget="treeview"] summary::-webkit-details-marker {
  display: none;
}