// Twisty.js // // Copyright (c) 2007 Red Hat, Inc. // // Permission is hereby granted, free of charge, to any person obtaining // a copy of this software and associated documentation files (the // "Software"), to deal in the Software without restriction, including // without limitation the rights to use, copy, modify, merge, publish, // distribute, sublicense, and/or sell copies of the Software, and to // permit persons to whom the Software is furnished to do so, subject to // the following conditions: // // The above copyright notice and this permission notice shall be // included in all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. // // Provide a nice interface for creating disclosure triangles in a web page // To use: // // put onload="initTwisty();" in your tag. // // You should have this in your style sheet: // // .twisty:hover { // background-color: #f0f0f0; // border: 1px solid #e0e0e0; // margin-left: -1px; // } // // .twisty { // cursor: hand; // cursor: pointer; // } // // When you have a section you wish to expose/hide, put: // //
Some Label //
//
Some content
//
//
function initTwisty () { var twisties = getElementsByClassName (document, "img", "twisty"); for (var i = 0; i < twisties.length; i++) { if (twisties[i].src.indexOf('twisty-hidden.gif') != -1) { for (var j = 0; j < twisties[i].parentNode.childNodes.length; j++) { if (twisties[i].parentNode.childNodes[j].className == "collapsible") twisties[i].parentNode.childNodes[j].style.setProperty ('display', 'none', null); } } } } function toggleTwisty (id) { var el = document.getElementById (id); var twisty; for (var i = 0; i < el.parentNode.childNodes.length; i++) { if (el.parentNode.childNodes[i].className == 'twisty') { twisty = el.parentNode.childNodes[i]; } } twisties = getElementsByClassName (document, "img", "twisty"); for (var i = 0; i < twisties.length; i++) { if (twisties[i].src.indexOf('twisty-do-down.gif') != -1) { twisties[i].setAttribute ('src', 'twisty-down.gif'); } else if (twisties[i].src.indexOf('twisty-do-hidden.gif') != -1) { twisties[i].setAttribute ('src', 'twisty-hidden.gif'); } } if (el.style.display == "none") { twisty.setAttribute('src', 'twisty-do-down.gif'); if (typeof Effect != "undefined") { Effect.toggle(id, "Slide", {duration:.10}); } else { el.style.setProperty ('display', 'block', null); } } else { twisty.setAttribute('src', 'twisty-do-hidden.gif'); if (typeof Effect != "undefined") { Effect.toggle(id, "Slide", {duration:.10}); } else { el.style.setProperty ('display', 'none', null); } } } function getElementsByClassName(oElm, strTagName, strClassName){ var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); strClassName = strClassName.replace(/\-/g, "\\-"); var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); var oElement; for(var i=0; i