Expandable tree structure

Expandable and Expanded

  • Directory 1
  • Directory 2
  • Directory 3
    • File 1
    • File 2
    • File 3
    • File 4
  • Directory 4
  • Directory 5
    • (empty)
<ul class="c-tree">
  <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 1</span></li>
  <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 2</span></li>
  <li class="c-tree__item c-tree__item--expanded"><span class="c-link">Directory 3</span>
    <ul class="c-tree">
      <li class="c-tree__item">File 1</li>
      <li class="c-tree__item">File 2</li>
      <li class="c-tree__item">File 3</li>
      <li class="c-tree__item">File 4</li>
    </ul>
  </li>
  </li>
  <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 4</span></li>
  <li class="c-tree__item c-tree__item--expanded"><span class="c-link">Directory 5</span></li>
    <ul class="c-tree">
      <li class="c-tree__item c-text--quiet">(empty)</li>
    </ul>
  </li>
</ul>