Pure CSS Collapsible Tree View - SimpleTree.css

Authorpsnet

Last UpdateJuly 2, 2025

LicenseMIT

Features:

Customizable styling with CSS variables
Cross-browser compatibility with standard CSS selectors
Accessible checkbox-based interaction model
Nested tree support with unlimited depth levels

How to use it:

1. Download the simple-tree.css stylesheet and link it in the <head> section of your HTML document.

<link rel="stylesheet" href="simple-tree.css" type="text/css"/>

2. Create your tree structure using nested unordered lists with specific checkbox and label patterns:

The parent <ul> must have the class .simple-tree.
Each collapsible node requires an <input type="checkbox">, a <label>, and a nested <ul>.
The id of the <input> must exactly match the for attribute of the <label>. This is what makes the label clickable to toggle the checkbox state.
To have a branch open by default, add the checked="checked" attribute to its corresponding checkbox.

<ul class="simple-tree">
  <li>
    <input type="checkbox" checked="checked" id="simple-tree-item-1" />
    <label for="simple-tree-item-1">Folder</label>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
    <input type="checkbox" checked="checked" id="simple-tree-item-2" />
    <label for="simple-tree-item-2">Folder</label>
    <ul>
      <li>
        <input type="checkbox" checked="checked" id="simple-tree-item-3" />
        <label for="simple-tree-item-3">Folder</label>
        <ul>
          <li>
            <input type="checkbox" id="simple-tree-item-4" />
            <label for="simple-tree-item-4">Folder</label>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
          </li>
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="simple-tree-item-5" />
        <label for="simple-tree-item-5">Folder</label>
        <ul>
          <li>
            <input type="checkbox" id="simple-tree-item-6" />
            <label for="simple-tree-item-6">Folder</label>
            <ul>
              <li>
                <input type="checkbox" id="simple-tree-item-7" />
                <label for="simple-tree-item-7">Folder</label>
                <ul>
                  <li>
                    <input type="checkbox" id="simple-tree-item-8" />
                    <label for="simple-tree-item-8">Folder</label>
                    <ul>
                      <li>Item 1</li>
                      <li>Item 2</li>
                      <li>Item 3</li>
                      <li>Item 4</li>
                      <li>Item 5</li>
                    </ul>
                  </li>
                  <li>Item 1</li>
                </ul>
              </li>
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
          </li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item 1</li>
    </ul>
  </li>
</ul>

How It Works

Simple Tree relies on a classic CSS technique often called the “checkbox hack.” It’s a clever way to manage state without JavaScript.

The library hides the actual checkbox element from view using opacity: 0 and position: absolute. The clickable element is the <label>, which is semantically tied to the checkbox. When you click the label, the browser toggles the checkbox’s :checked state.

This is where the magic happens. The core of the functionality lies in the general sibling combinator (~). The CSS contains this rule:

.simple-tree input:checked ~ ul {
   height: auto;
   opacity: 1;
}

This selector targets any <ul> that is a sibling of a checked <input> and is also a descendant of an element with the .simple-tree class. When the checkbox is checked, the <ul> transitions from height: 0 and opacity: 0 to height: auto and opacity: 1, creating a smooth opening animation. When unchecked, it reverts to its hidden state.

The folder icons and grid lines are generated with the ::before pseudo-element on the labels and list items. This avoids the need for external image assets and keeps the component self-contained. For example, the label:before styles create the box, and another rule changes its background when the sibling input is not checked, indicating a closed folder.

Pure CSS Collapsible Tree View – SimpleTree.css

Features:

How to use it:

How It Works

See Also:

You Might Be Interested In:

Leave a ReplyCancel reply