Skip to content

Instantly share code, notes, and snippets.

@Nemo157

Nemo157/list_expanders.html

Created August 7, 2015 01:54
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 Nemo157/b3a06e18d12bd4e0ae7b to your computer and use it in GitHub Desktop.
Save Nemo157/b3a06e18d12bd4e0ae7b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
list_expanders.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
@charset "UTF-8";
* {
font-family: monospace;
}
li {
list-style: none;
}
input {
display: none;
}
.key, .end {
padding-left: 18px;
}
.expander + label:before {
display: inline-block;
width: 12px;
content: "▶";
}
.expander ~ .end {
padding-left: 0px;
}
.expander ~ .end:before {
content: "…";
margin-right: 6px;
}
.expander ~ ol {
color: gray;
padding-left: 0px;
display: inline-block;
}
.expander ~ ol > li {
display: none;
}
.expander ~ ol > li.id {
display: inline-block;
}
.expander ~ ol > li > .key {
padding-left: 0px;
}
.expander:checked + label:before {
display: inline-block;
width: 12px;
content: "▼";
}
.expander:checked ~ .end {
padding-left: 18px;
}
.expander:checked ~ .end:before {
content: none;
}
.expander:checked ~ ol {
color: black;
padding-left: 40px;
display: block;
}
.expander:checked ~ ol > li {
display: block;
}
.expander:checked ~ ol > li.id {
display: block;
}
.expander:checked ~ ol > li > .key {
padding-left: 18px;
}
</style>
</head>
<body>
<ol>
<li class="id">
<span class="key">parent_id</span>:&nbsp;<span class="value">test</span>,
</li>
<li>
<input checked="" class="expander" id="expander-1" type="checkbox" /><label for="expander-1">&nbsp;</label><span class="expanderkey">child</span>: {
<ol>
<li class="id">
<span class="key">child_id</span>:&nbsp;<span class="value">test2</span>,
</li>
<li>
<input checked="" class="expander" id="expander-2" type="checkbox" /><label for="expander-2">&nbsp;</label><span class="expanderkey">sub_child</span>: {
<ol>
<li class="id">
<span class="key">sub_child_id</span>:&nbsp;<span class="value">test3</span>,
</li>
<li>
<span class="key">other_property</span>:&nbsp;<span class="value">test4</span>
</li>
</ol>
<span class="end">}</span>,
</li>
<li>
<span class="key">other_property</span>:&nbsp;<span class="value">test5</span>
</li>
</ol>
<span class="end">}</span>,
</li>
<li>
<span class="key">other_property</span>:&nbsp;<span class="value">test6</span>
</li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment