Skip to content

Instantly share code, notes, and snippets.

@heracek

heracek/index.html

Created October 8, 2014 12:24
Show Gist options
  • Save heracek/332f43cbd664d6c0e01a to your computer and use it in GitHub Desktop.
Save heracek/332f43cbd664d6c0e01a to your computer and use it in GitHub Desktop.
Download ZIP
Show/Hide for AsciiDoctor checklists in pure JS and CSS // source http://jsbin.com/situqe/2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Show/Hide for AsciiDoctor checklists in pure JS and CSS" />
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.hide-me > ul > li:nth-child(n + 2),
.hide-me > ul > li:first-child > .checklist {
display: none;
}
.hide-me.show-me > ul > li:nth-child(n + 2),
.hide-me.show-me > ul > li:first-child > .checklist {
display: block;
}
.hide-me-float-right {
float: right;
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="ulist checklist hide-me">
<ul class="checklist">
<li>
<p>✓ <strong>reset</strong></p>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p>✓ page titles</p>
</li>
<li>
<p>✓ contact form</p>
</li>
<li>
<p>✓ newsletter form</p>
</li>
<li>
<p>✓ 404, 500, 403?</p>
</li>
<li>
<p>✓ no-js version</p>
</li>
<li>
<p>✓ old pages redirects</p>
</li>
<li>
<p>✓ google analytics</p>
</li>
<li>
<p>✓ robots.txt</p>
</li>
</ul>
</div>
</li>
<li>
<p>✓ <strong>pripominky 29.9.14</strong></p>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p>✓ mobil</p>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p>✓ set new min-width for body</p>
</li>
<li>
<p>✓ opravit text pres sebe</p>
</li>
<li>
<p>✓ vypnout parallax</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<p>✓ <strong>pripominky 6.10.14</strong></p>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p>✓ A pak by to chtělo doladit to cukání, když se jede kolečkem na myši</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
<hr>
<div class="ulist checklist hide-me">
<ul class="checklist">
<li>
<p>✓ <strong>reset</strong></p>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p>✓ page titles</p>
</li>
<li>
<p>✓ contact form</p>
</li>
<li>
<p>✓ newsletter form</p>
</li>
<li>
<p>✓ 404, 500, 403?</p>
</li>
<li>
<p>✓ no-js version</p>
</li>
<li>
<p>✓ old pages redirects</p>
</li>
<li>
<p>✓ google analytics</p>
</li>
<li>
<p>✓ robots.txt</p>
</li>
</ul>
</div>
</li>
<li>
<p>✓ <strong>pripominky 29.9.14</strong></p>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p>✓ mobil</p>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p>✓ set new min-width for body</p>
</li>
<li>
<p>✓ opravit text pres sebe</p>
</li>
<li>
<p>✓ vypnout parallax</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<p>✓ <strong>pripominky 6.10.14</strong></p>
<div class="ulist checklist">
<ul class="checklist">
<li>
<p>✓ A pak by to chtělo doladit to cukání, když se jede kolečkem na myši</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script id="jsbin-javascript">
var addShowHideClickEvent = function(showMoreDiv, hideDiv) {
showMoreDiv.addEventListener("click", function() {
hideDiv.classList.toggle("show-me");
});
}
var divsToHide = document.querySelectorAll('div.hide-me');
for (var i = 0, hideDiv; hideDiv = divsToHide[i]; i++) {
var firstLi = hideDiv.querySelector('ul > li:first-child > :first-child');
var showMoreDiv = document.createElement('div');
showMoreDiv.classList.add('hide-me-float-right');
showMoreDiv.innerHTML = 'more...'
firstLi.appendChild(showMoreDiv)
addShowHideClickEvent(showMoreDiv, hideDiv)
}
</script>
<script id="jsbin-source-css" type="text/css">.hide-me > ul > li:nth-child(n + 2),
.hide-me > ul > li:first-child > .checklist {
display: none;
}
.hide-me.show-me > ul > li:nth-child(n + 2),
.hide-me.show-me > ul > li:first-child > .checklist {
display: block;
}
.hide-me-float-right {
float: right;
color: blue;
text-decoration: underline;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var addShowHideClickEvent = function(showMoreDiv, hideDiv) {
showMoreDiv.addEventListener("click", function() {
hideDiv.classList.toggle("show-me");
});
}
var divsToHide = document.querySelectorAll('div.hide-me');
for (var i = 0, hideDiv; hideDiv = divsToHide[i]; i++) {
var firstLi = hideDiv.querySelector('ul > li:first-child > :first-child');
var showMoreDiv = document.createElement('div');
showMoreDiv.classList.add('hide-me-float-right');
showMoreDiv.innerHTML = 'more...'
firstLi.appendChild(showMoreDiv)
addShowHideClickEvent(showMoreDiv, hideDiv)
}</script></body>
</html>
Raw
jsbin.situqe.css
.hide-me > ul > li:nth-child(n + 2),
.hide-me > ul > li:first-child > .checklist {
display: none;
}
.hide-me.show-me > ul > li:nth-child(n + 2),
.hide-me.show-me > ul > li:first-child > .checklist {
display: block;
}
.hide-me-float-right {
float: right;
color: blue;
text-decoration: underline;
}
Raw
jsbin.situqe.js
var addShowHideClickEvent = function(showMoreDiv, hideDiv) {
showMoreDiv.addEventListener("click", function() {
hideDiv.classList.toggle("show-me");
});
}
var divsToHide = document.querySelectorAll('div.hide-me');
for (var i = 0, hideDiv; hideDiv = divsToHide[i]; i++) {
var firstLi = hideDiv.querySelector('ul > li:first-child > :first-child');
var showMoreDiv = document.createElement('div');
showMoreDiv.classList.add('hide-me-float-right');
showMoreDiv.innerHTML = 'more...'
firstLi.appendChild(showMoreDiv)
addShowHideClickEvent(showMoreDiv, hideDiv)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment