Skip to content

Instantly share code, notes, and snippets.

@FlyCodeRepeat

FlyCodeRepeat/Tree.html

Last active December 14, 2015 15:59
Show Gist options
  • Save FlyCodeRepeat/5111982 to your computer and use it in GitHub Desktop.
Save FlyCodeRepeat/5111982 to your computer and use it in GitHub Desktop.
Download ZIP
HTML tree implementation using only CSS. No JS needed!
Raw
Tree.html
<!DOCTYPE HTML>
<html>
<head>
<title>Tree?</title>
<style>
ul.tree{
height: 100%;
list-style: none;
padding: 0;
}
ul.tree li{
padding: 5px;
}
/* Don't show the checkbox button. Use its label for interactions. */
ul.tree input{
display: none;
}
/* add some left margin to subtrees */
li ul{
margin-left: 30px;
}
/* the closed state of the item title */
ul.tree input ~ label{
background: #900;
color: #fff;
display: block;
border-radius: 5px;
padding: 5px 5px 5px 40px;
}
/* the open state of the item title */
ul.tree input:checked ~ label{
background: #090;
}
/* closed state of the content */
ul.tree input ~ .content{
display: none;
}
/* opened state of the content */
ul.tree input:checked ~ .content{
display: block;
}
</style>
</head>
<body>
<ul class="tree">
<li>
<input id="rd1" type="checkbox" name="tree1"/><label for="rd1">Item 1</label>
<ul class="tree content">
<li>
<input id="rd1.1" type="checkbox" name="tree1"/><label for="rd1.1">Item 1</label>
<article class="content">
<p>This is the text for Item 1</p>
</article>
</li>
<li>
<input id="rd1.2" type="checkbox" name="tree1"/><label for="rd1.2">Item 2</label>
<article class="content">
<p>This is the text for Item 2</p>
</article>
</li>
<li>
<input id="rd1.3" type="checkbox" name="tree1"/><label for="rd1.3">Item 3</label>
<article class="content">
<p>This is the text for Item 3</p>
</article>
</li>
<li>
<input id="rd1.4" type="checkbox" name="tree1"/><label for="rd1.4">Item 4</label>
<article class="content">
<p>This is the text for Item 4</p>
</article>
</li>
<li>
<input id="rd1.5" type="checkbox" name="tree1"/><label for="rd1.5">Item 5</label>
<article class="content">
<p>This is the text for Item 5</p>
</article>
</li>
</ul>
</li>
<li>
<input id="rd2" type="checkbox" name="tree1"/><label for="rd2">Item 2</label>
<ul class="tree content">
<li>
<input id="rd2.2.1" type="checkbox" name="tree1"/><label for="rd2.1">Item 1</label>
<article class="content">
<p>This is the text for Item 1</p>
</article>
</li>
<li>
<input id="rd2.2" type="checkbox" name="tree1"/><label for="rd2.2">Item 2</label>
<article class="content">
<p>This is the text for Item 2</p>
</article>
</li>
<li>
<input id="rd2.3" type="checkbox" name="tree1"/><label for="rd2.3">Item 3</label>
<article class="content">
<p>This is the text for Item 3</p>
</article>
</li>
<li>
<input id="rd2.4" type="checkbox" name="tree1"/><label for="rd2.4">Item 4</label>
<article class="content">
<p>This is the text for Item 4</p>
</article>
</li>
<li>
<input id="rd2.5" type="checkbox" name="tree1"/><label for="rd2.5">Item 5</label>
<article class="content">
<p>This is the text for Item 5</p>
</article>
</li>
</ul>
</li>
<li>
<input id="rd3" type="checkbox" name="tree1"/><label for="rd3">Item 3</label>
<article class="content">
<p>This is the text for Item 3</p>
</article>
</li>
<li>
<input id="rd4" type="checkbox" name="tree1"/><label for="rd4">Item 4</label>
<article class="content">
<p>This is the text for Item 4</p>
</article>
</li>
<li>
<input id="rd5" type="checkbox" name="tree1"/><label for="rd5">Item 5</label>
<article class="content">
<p>This is the text for Item 5</p>
</article>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment