CSS - Collapsible 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 or pages with many pieces of information you might want to expand. Coders love zippies! I've programmed zippies multiple ways, but I'm often unhappy with how much JavaScript some require. This one is great because it has minimal lines of JavaScript and the HTML is pretty clean too. Most of the credit for this code comes from w3schools.com - How to Collapse, but I've impoved the JavaScript and made it a little bit my own.
Collapsible Zippy
This is a CSS + HTML + Javascript only solution for a zippy.
<!doctype html>
<html lang="en">
<head>
<title>Collapsible Zippy</title>
<style>
/**
* Special 'collapsible' class where HTML must be as follows:
* <button type="button" class="collapsible">Second Zippy</button>
* <div class="content">
* You can put a tonne of text and images in here.
* </div>
*/
.collapsible {
background-color: #ccc;
color: black;
cursor: s-resize;
padding: 2px;
margin: 0;
margin-top: 10px;
padding-left: 10px;
width: 100%;
height: 25px;
border: none;
text-align: left;
outline: none;
font-weight: bold;
font-size: 14px;
}
.active,
.collapsible:hover {
background-color: #c4c4c4;
cursor: s-resize;
}
.content {
margin: 0;
padding: 5px 20px 5px 10px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
border: 1px solid #e1e1e1;
}
.collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: black;
float: right;
margin-right: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
</style>
</head>
<body>
<button type="button" class="collapsible active">First Highlights</button>
<div class="content">
<p>First zippy here... you add 'active' to the class list to make it expanded by default.</p>
<button type="button" class="collapsible active" style="width: 160px">Nested Zippy</button>
<div class="content">
<p>This content will start hidden unless you expand the nested zippy. Notice that I manually set the zippy button width for this one.</p>
</div>
</div>
<button type="button" class="collapsible">Second Zippy</button>
<div class="content">
You can put a tonne of text and images in here... so I'll just do lots of dots .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. .............. ..............
</div>
</body>
<script>
// Code for "collapsible" zippy areas:
let coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i++) {
// Add listener to toggle contents when collapsible is clicked:
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
let content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
// Expand any collapsible elements already marked as "active":
if (coll[i].classList.contains("active")) {
let content = coll[i].nextElementSibling;
content.style.display = "block";
}
}
</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.
- CSS - Dropdowns on Hover - Similar to a tooltip but heavier and more versatile in that you include a whole extra div which could include photos etc.
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.
