NestedUl

Basic tree

<ul class="nestedul">
  <li>
    Root
    <ul>
      <li>Child</li>
      <li>Child</li>
    </ul>
  </li>
</ul>

• Root
  • Child
  • Child

Static tree

Nodes cannot be expanded or collapsed.

<ul class="nestedul nestedul-static">
  <li>
    Root
    <ul>
      <li>Child</li>
      <li>Child</li>
    </ul>
  </li>
</ul>

• Root
  • Child
  • Child

Compact mode

Displays a more compact tree layout.

<ul class="nestedul nestedul-narrow">
  <li>
    Root
    <ul>
      <li>Child</li>
      <li>Child</li>
    </ul>
  </li>
</ul>

• Root
  • Child
  • Child

Compact static tree

Compact layout without expand/collapse behavior.

<ul class="nestedul nestedul-narrow nestedul-static">
  <li>
    Root
    <ul>
      <li>Child</li>
      <li>Child</li>
    </ul>
  </li>
</ul>

• Root
  • Child
  • Child

Initially closed nodes

Make a node collapsed on page load with nestedul-close class.

<ul class="nestedul">
  <li>
    Root
    <ul>
      <li class="nestedul-close">Closed child
        <ul>
          <li>Hidden on load</li>
        </ul>
      </li>
      <li>Open child
        <ul>
          <li>Visible on load</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

• Root
  • Closed child
    • Hidden on load
  • Open child
    • Visible on load