Skip to content

Instantly share code, notes, and snippets.

@GrahamWalters

GrahamWalters/index.html

Created June 29, 2015 21:17
Show Gist options
  • Save GrahamWalters/81dc77acc6e8f163c1b6 to your computer and use it in GitHub Desktop.
Save GrahamWalters/81dc77acc6e8f163c1b6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/lageqa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.branch {
display: none;
}
label.toggle {
font-weight: normal;
}
label.toggle > span {
font-weight: bold;
}
label.toggle > input.toggle {
display: none;
}
label.toggle > input.toggle:checked + .branch {
display:block;
}
</style>
</head>
<body>
<h4 class="bg-danger">Hello world</h4>
<div class="tree">
<ul>
<li>
<label class="toggle"><span class="branch-base">Toggle</span>
<input type="checkbox" class="toggle" />
<div class="branch">
<ul>
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>
<label class="toggle"><span class="branch-base">Sub-link 3</span>
<input type="checkbox" class="toggle" />
<div class="branch">
<ul>
<li><a href="http://www.google.com" target="_blank">Sub-link Google</a></li>
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
</ul>
</div>
</label>
</li>
<li>Sub-link 4</li>
<li>Sub-link 5</li>
</ul>
</div>
</label>
</li>
</ul>
<ul>
<li>
<label class="toggle"><span class="branch-base">Toggle</span>
<input type="checkbox" class="toggle" />
<div class="branch">
<ul>
<li>Sub-link 1</li>
<li>Sub-link 2</li>
<li>Sub-link 3</li>
<li>Sub-link 4</li>
</ul>
</div>
</label>
</li>
</ul>
</div>
<script id="jsbin-source-css" type="text/css">.branch {
display: none;
}
label.toggle {
font-weight: normal;
}
label.toggle > span {
font-weight: bold;
}
label.toggle > input.toggle {
display: none;
}
label.toggle > input.toggle:checked + .branch {
display:block;
}</script>
</body>
</html>
Raw
style
.branch {
display: none;
}
label.toggle {
font-weight: normal;
}
label.toggle > span {
font-weight: bold;
}
label.toggle > input.toggle {
display: none;
}
label.toggle > input.toggle:checked + .branch {
display:block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment