Skip to content

Instantly share code, notes, and snippets.

@bob-lee

bob-lee/dabblet.css

Created February 26, 2021 19:03
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 bob-lee/d29609ccb017662e6507947ccbd5e470 to your computer and use it in GitHub Desktop.
Save bob-lee/d29609ccb017662e6507947ccbd5e470 to your computer and use it in GitHub Desktop.
Download ZIP
Collapsible & sticky headers
Raw
dabblet.css
/**
* Collapsible & sticky headers
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
* {
font-family: Lato;
}
.header {
border: 1px solid grey;
height: 39px;
background-color: white;
position: sticky;
top: 5px;
}
.content {
background-color: rgb(55,255,255,.1);
}
.content.to-hide {
display: none;
}
#content-1 {
height: 100px;
}
#content-2 {
height: 200px;
}
#content-3 {
height: 300px;
}
#content-3 {
height: 400px;
}
#content-4 {
height: 200px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<main>
<div id="header-1" class="header">
header-1, click me to collapse
</div>
<div id="content-1" class="content">
content-1<br>content-1<br>content-1<br>content-1<br>
content-1<br>
</div>
<div id="header-2" class="header">
header-2, click me to collapse
</div>
<div id="content-2" class="content">
content-2<br>content-2<br>content-2<br>content-2<br>
content-2<br>content-2<br>content-2<br>content-2<br>
content-2<br>content-2<br>content-2<br>
</div>
<div id="header-3" class="header">
header-3, click me to collapse
</div>
<div id="content-3" class="content">
content-3<br>content-3<br>content-3<br>content-3<br>
content-3<br>content-3<br>content-3<br>content-3<br>
content-3<br>content-3<br>content-3<br>content-3<br>
content-3<br>content-3<br>content-3<br>content-3<br>
content-3<br>content-3<br>content-3<br>content-3<br>
content-3<br>content-3<br>
</div>
<div id="header-4" class="header">
header-4, click me to collapse
</div>
<div id="content-4" class="content">
content-4<br>content-4<br>content-4<br>content-4<br>
content-4<br>content-4<br>content-4<br>content-4<br>
content-4<br>content-4<br>content-4<br>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor purus et mauris aliquet congue. Fusce blandit neque eget metus lobortis, ac laoreet mi pretium. Etiam mollis sit amet ipsum sit amet bibendum. Sed ut felis dolor. Donec euismod, enim at tempor consequat, turpis ante dignissim sem, quis bibendum diam metus nec metus. Mauris non tincidunt orci. Pellentesque pellentesque nunc cursus, faucibus tellus et, iaculis tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec orci sed libero dapibus auctor. Etiam sed lorem tortor. Donec quis varius mauris. Vestibulum at dictum leo. Duis vitae dapibus dui. Maecenas laoreet in mauris sit amet faucibus. Morbi nibh risus, ullamcorper in sagittis a, malesuada quis ligula. Nunc fringilla eros posuere, auctor lectus vel, vulputate diam. Donec eleifend feugiat ex at ultrices. Suspendisse commodo, ipsum quis dapibus faucibus, diam massa sagittis mi, eu tincidunt nulla orci eget nibh. Ut ullamcorper imperdiet enim, et fermentum ante faucibus non. Ut auctor eleifend elementum. Morbi pretium non nibh at ultricies. Phasellus ut placerat libero. Maecenas pulvinar vel risus eu bibendum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor purus et mauris aliquet congue. Fusce blandit neque eget metus lobortis, ac laoreet mi pretium. Etiam mollis sit amet ipsum sit amet bibendum. Sed ut felis dolor. Donec euismod, enim at tempor consequat, turpis ante dignissim sem, quis bibendum diam metus nec metus. Mauris non tincidunt orci. Pellentesque pellentesque nunc cursus, faucibus tellus et, iaculis tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec orci sed libero dapibus auctor. Etiam sed lorem tortor. Donec quis varius mauris. Vestibulum at dictum leo. Duis vitae dapibus dui. Maecenas laoreet in mauris sit amet faucibus. Morbi nibh risus, ullamcorper in sagittis a, malesuada quis ligula. Nunc fringilla eros posuere, auctor lectus vel, vulputate diam. Donec eleifend feugiat ex at ultrices. Suspendisse commodo, ipsum quis dapibus faucibus, diam massa sagittis mi, eu tincidunt nulla orci eget nibh. Ut ullamcorper imperdiet enim, et fermentum ante faucibus non. Ut auctor eleifend elementum. Morbi pretium non nibh at ultricies. Phasellus ut placerat libero. Maecenas pulvinar vel risus eu bibendum.
</p>
<div>
</main>
Raw
dabblet.js
// alert('Hello world!');
(function() {
document.addEventListener('DOMContentLoaded', doIt);
function doIt() {
const headers = document.querySelectorAll('div.header');
headers.forEach(x => {
x.addEventListener('click', showHide);
});
function showHide(e) {
const contentDiv = document.querySelector(`div#${e.target.id} + div.content`);
const toHide = !contentDiv.classList.contains('to-hide');
console.log(e.target.id, toHide);
if (toHide) {
contentDiv.classList.add('to-hide');
e.target.textContent = `${e.target.id}, click me to expand`;
} else {
contentDiv.classList.remove('to-hide');
e.target.textContent = `${e.target.id}, click me to collapse`;
}
}
}
})();
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment