1. Download the simple-tree.css stylesheet and link it in the <head> section of your HTML document.
<linkrel="stylesheet" href="simple-tree.css" type="text/css"/>
2. Create your tree structure using nested unordered lists with specific checkbox and label patterns:
<ul> must have the class .simple-tree.<input type="checkbox">, a <label>, and a nested <ul>.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.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> 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.
The post Pure CSS Collapsible Tree View – SimpleTree.css appeared first on CSS Script.
Today's links Corrupt anticorruption: Notes from a target-rich environment. Hey look at this: Delights to…
Robotics How Pokémon Go Is Giving Delivery Robots an Inch-Perfect View of the WorldWill Douglas…
Digital communication is well beyond picture and prose. Nowadays viewers demand more interactive and human-like…
AI video generators are revolutionizing the film industry in 2026 by drastically reducing VFX budgets,…
The AI cowork platform category has exploded in 2026. Where teams once relied on cloud-based…
AI is reshaping how companies run revenue operations. Sales teams are experimenting with AI-assisted outreach,…
This website uses cookies.