Skip to content

Instantly share code, notes, and snippets.

@sorie

sorie/index.html

Created January 16, 2019 00:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sorie/efd2c07903f48c13e925585833bc74e2 to your computer and use it in GitHub Desktop.
Save sorie/efd2c07903f48c13e925585833bc74e2 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/mudajot
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.tree {
color: #000;
}
.tree, .tree ul {
list-style: none;
padding-left: 20px;
}
.tree label:before {
content: "Θ";
}
.tree *:before {
display: inline-block;
width: 17px;
height: 17px;
}
.tree a:before {
content: "∞";
}
.tree a {
text-decoration: none;
}
.tree input[type="checkbox"]{
display:none;
}
.tree input[type="checkbox"]:checked~ul{
display:none;
}
.tree input[type="checkbox"]:checked+label:before{
content: 'Ｏ';
}
</style>
</head>
<body>
<ul class="tree">
<li>
<input type="checkbox" id="root">
<label for="root">ROOT</label>
<ul>
<li><a href="https://opentutorials.org">node1</a></li>
<li><a href="https://opentutorials.org">node2</a></li>
<li>
<input type="checkbox" id="node3">
<label for="node3">node3</label>
<ul>
<li><a href="https://opentutorials.org">node31</a></li>
<li><a href="https://opentutorials.org">node32</a></li>
<li><a href="https://opentutorials.org">node33</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script id="jsbin-source-css" type="text/css">.tree {
color: #000;
}
.tree, .tree ul {
list-style: none;
padding-left: 20px;
}
.tree label:before {
content: "Θ";
}
.tree *:before {
display: inline-block;
width: 17px;
height: 17px;
}
.tree a:before {
content: "∞";
}
.tree a {
text-decoration: none;
}
.tree input[type="checkbox"]{
display:none;
}
.tree input[type="checkbox"]:checked~ul{
display:none;
}
.tree input[type="checkbox"]:checked+label:before{
content: 'Ｏ';
} </script>
</body>
</html>
Raw
jsbin.mudajot.css
.tree {
color: #000;
}
.tree, .tree ul {
list-style: none;
padding-left: 20px;
}
.tree label:before {
content: "Θ";
}
.tree *:before {
display: inline-block;
width: 17px;
height: 17px;
}
.tree a:before {
content: "∞";
}
.tree a {
text-decoration: none;
}
.tree input[type="checkbox"]{
display:none;
}
.tree input[type="checkbox"]:checked~ul{
display:none;
}
.tree input[type="checkbox"]:checked+label:before{
content: 'Ｏ';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment