CSS - Checked Zippy
Jump to navigation
Jump to search
Contents
About
NOTE: This page is a daughter page of: CSS
Collapsible areas or zippies are popup on long pages. Coders love zippies! This zippy I created is pretty minimal on JavaScript, and uses a checkbox such that when you submit a form, it will add "?show-about-salsa=y" using the zippy name for any expanded zippies. This can be useful if you want to save and/or programattically do something with what zippies are expanded when the page refreshes.
Collapsible Zippy
This is a CSS + HTML + Javascript only solution for zippies which use checkboxes.
<!doctype html>
<html lang="en">
<head>
<title>Collapsible Zippy</title>
<style>
/**
* Special 'zippy' class which must be used as follows:
* <div class="zippy">
* <input type="checkbox" name="show-about-zouk" class="zippy-checkbox" value="y">
* <label class="zippy-checkbox-label" for="show-about-zouk">About Zouk</label>
* <div class="zippy-content">
* First zippy here... we did not set 'checked' to the 'zippy-checkbox' so it will be closed by default.
* </div>
* </div>
*/
.zippy-checkbox {
display: none;
color: #4285f4;
margin-top: 3px;
}
.zippy-checkbox input { /* Hide the browser's default checkbox. */
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
.zippy-checkbox + label:before,
.zippy-checkbox + label span.sg-icon-target:before
{
padding-left: 3px;
padding-right: 5px;
content: "\2191";
color: #4285f4;
}
.zippy-checkbox:checked + label:before,
.zippy-checkbox:checked + label span.sg-icon-target:before
{
padding-left: 3px;
padding-right: 5px;
content: "\2193";
color: #4285f4;
}
.zippy-checkbox-label {
color: #4285f4;
cursor: s-resize;
}
.zippy-checkbox-label:hover {
background-color: #e8f1ff;
}
.zippy-content {
padding-left: 5px;
margin-left: 5px;
border-left: 2px solid #cbcbcb85;
margin-top: 3px;
margin-bottom: 8px;
}
</style>
</head>
<body>
<form>
<div class="zippy">
<input type="checkbox" name="show-about-zouk" class="zippy-checkbox" value="y">
<label class="zippy-checkbox-label" for="show-about-zouk">About Zouk</label>
<div class="zippy-content">
First zippy here... we did not set 'checked' to the 'zippy-checkbox' so it will be closed by default.
</div>
</div>
<div class="zippy">
<input type="checkbox" name="show-about-salsa" class="zippy-checkbox" value="y" checked>
<label class="zippy-checkbox-label" for="show-about-salsa">About Salsa</label>
<div class="zippy-content">
First zippy here... we added 'checked' to the 'zippy-checkbox' to make it open by default.
<div class="zippy">
<input type="checkbox" name="show-about-salsa-on-2" class="zippy-checkbox" value="y" checked>
<label class="zippy-checkbox-label" for="show-about-salsa-on-2">About Salsa on 2</label>
<div class="zippy-content">
Nested Zippy here.
</div>
</div>
</div>
</div>
<br>
<input type="submit" value="Submit (notice URL change)">
</form>
</body>
<script>
// Code for "zippy" areas:
let zippies = document.getElementsByClassName("zippy");
for (let i = 0; i < zippies.length; i++) {
let zippy = zippies[i];
console.log(zippy);
// Add listener to toggle contents when zippy is checked:
zippy.children[1].addEventListener("click", function () {
let checkbox = this.parentElement.children[0];
let label = this;
let content = this.parentElement.children[2];
checkbox.checked = !checkbox.checked;
content.style.display = (checkbox.checked) ? "block" : "none";
label.style.cursor = (checkbox.checked) ? "n-resize" : "s-resize";
});
// Expand any collapsible elements already marked as "active":
zippy.children[2].style.display = (zippy.children[0].checked) ? "block" : "none";
zippy.children[1].style.cursor = (zippy.children[0].checked) ? "n-resize" : "s-resize";
}
</script>
</html>
See Also
- CSS - Collapsible Zippy - Very similar to this one in JavaScript, but a little lighter on HTML (it doesn't use checkboxes).
- JavaScript - Zippy - Is a little more involved than this example, but has plus and minus images at the start.
Links
- w3schools.com - How to Collapse - The one on which this page based.
- digitalocean.com - CSS Collapsible - Has no JavaSript, but only works for one zippy. Regardless, one nice feature: the collapsible area and the arrow animate nicely.