Difference between revisions of "JavaScript - Zippy"
Jump to navigation
Jump to search
(Created page with "thumb|right|250px|Zippy area ==About== {{DaughterPage|mother=JavaScript}} A zippy is a HTML area designed to be expanded and contracted...") |
|||
| Line 86: | Line 86: | ||
height: 16px; | height: 16px; | ||
width: 19px; | width: 19px; | ||
| − | background-image: url(' | + | background-image: url('images/plus.png'); |
} | } | ||
.zippy-closed { | .zippy-closed { | ||
| Line 93: | Line 93: | ||
height: 16px; | height: 16px; | ||
width: 19px; | width: 19px; | ||
| − | background-image: url(' | + | background-image: url('images/minus.png'); |
} | } | ||
</style> | </style> | ||
| Line 99: | Line 99: | ||
<script src="zippy.js"></script> | <script src="zippy.js"></script> | ||
</head> | </head> | ||
| − | + | ||
<body> | <body> | ||
| Line 106: | Line 106: | ||
<div id="zippy-1-img" class="zippy-closed"></div>About My Car</a><br> | <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> | <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');"> | <a onclick="ToggleZippy('zippy-2-img', 'zippy-2-area');"> | ||
Revision as of 00:45, 31 October 2019
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/plus.png');
}
.zippy-closed {
cursor: pointer;
display: inline-block;
height: 16px;
width: 19px;
background-image: url('images/minus.png');
}
</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>
| 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! :)
|
