JavaScript - Zippy
Jump to navigation
Jump to search
About
NOTE: This page is a daughter page of: JavaScript
A zippy is a HTML area designed to be expanded and contracted (shown and hidden) as you toggle a little plus/minus icon. These are very common, and lots of people and libraries have code.... here's a bare bones JavaScript example of that code which relies on you matching the ids of the area and icons.
Zippy JavaScript Code
zippy.js:
/**
* Used to show or hide a HTML element.
* @param {string} element Element to show or hide.
* @param {boolean} show True to show, false to hide.
*/
function ShowElement(element, show) {
element.style.display = (show) ? "block" : "none";
}
/**
* Toggles a zippy element by showing or hiding the indicated div
* area and updating the little plus or minus image to match.
* The format of HTML is expected as:
*
* <span onclick="ToggleZippy('zippy-1-img', 'zippy-1-area');">
* <div id="zippy-1-img" class="zippy-closed"></div>About</span>
* <br>
* <div id="zippy-1-area" class="comment">Long block of text.</div>
*
*
* @param {string} zippyIconId Id given to the plus/minus image.
* @param {string} zippyAreaId Id given to the div we wish to expand/contract.
*/
function ToggleZippy(zippyIconId, zippyAreaId) {
var zippyArea = document.getElementById(zippyAreaId);
if (zippyArea == null) {
console.error("ERROR: Could not find " + zippyAreaId);
return;
}
var expand = zippyArea.style.display == "none";
console.log(expand);
SetZippy(zippyIconId, zippyAreaId, expand);
}
/**
* Expands or contracts a zippy element with a plus/minus image and a
* div area to show or hide.
*
* @param {string} zippyIconId Id given to the plus/minus image.
* @param {string} zippyAreaId Id given to the div we wish to expand/contract.
*/
function SetZippy(zippyIconId, zippyAreaId, expand) {
var zippyIcon = document.getElementById(zippyIconId);
var zippyArea = document.getElementById(zippyAreaId);
if (zippyArea == null || zippyIcon == null) {
console.error("ERROR: Could not find " + zippyIconId + " or " + zippyAreaId);
return;
}
ShowElement(zippyArea, expand);
zippyIcon.className = (expand) ? "zippy-closed" : "zippy-open";
}
zippy-example.html:
<html>
<head>
<style>
.zippy-open {
cursor: pointer;
display: inline-block;
height: 16px;
width: 19px;
background-image: url('images/zippy_plus.png');
}
.zippy-closed {
cursor: pointer;
display: inline-block;
height: 16px;
width: 19px;
background-image: url('images/zippy_minus.png');
}
/* TIP: If you add a :hover with a subtle background color to each of these */
/* it looks pretty sexy. I like 'cursor: n-resize/s-resize' also. */
</style>
<script src="zippy.js"></script>
</head>
<body>
<a onclick="ToggleZippy('zippy-1-img', 'zippy-1-area');">
<div id="zippy-1-img" class="zippy-closed"></div>About My Car</a><br>
<div id="zippy-1-area" class="comment">Long block of text about a car.</div>
<hr>
<a onclick="ToggleZippy('zippy-2-img', 'zippy-2-area');">
<div id="zippy-2-img" class="zippy-closed"></div>About My Dog</a><br>
<div id="zippy-2-area" class="comment">Long block of text about a dog.</div>
<script>
ToggleZippy('zippy-2-img', 'zippy-2-area', false); // Default second zippy to closed.
</script>
</body>
</html>
See Also
- CSS - Collapsible Zippy - Different style and much less JavaScript than this example.
- CSS - Checked Zippy - Similar to the option above.
| Code license | For all of the code on my site... if there are specific instruction or licence comments please leave them in. If you copy my code with minimum modifications to another webpage, or into any code other people will see I would love an acknowledgment to my site.... otherwise, the license for this code is more-or-less WTFPL (do what you want)! If only copying <20 lines, then don't bother. That said - if you'd like to add a web-link to my site www.andrewnoske.com or (better yet) the specific page with code, that's a really sweet gestures! Links to the page may be useful to yourself or your users and helps increase traffic to my site. Hope my code is useful! :)
|
