Show/Hide/Slide Example

////////////////////////////////////////////////////////////////////////////// // Show/Hide With a Slide Script // ////////////////////////////////////////////////////////////////////////////// // // This little script allows you to create a section of content and hide it at // the top of your screen for users to open and close as they wish. This is // particularly handy for things like login boxes, supplementary navigation // and content enhancements like tips, tricks and interesting tidbits of // information you don't need showcased within your regular content. // // If a visitor has JavaScript disabled or unavailable, the hidden content box // will simply display itself as if it was always a visible component. // // CONTRIBUTORS: // // Original Creator: // Paul Hirsch // www.paulhirsch.com // // Tested by: // International Web Developers Network (IWDN) // www.iwdn.net - home page // www.iwdn.net/index.php - forums/community where testing took place // // Other Contributors: // Michaeljohn Clement - clued me in on offsetHeight - very handy! // [INSERT YOUR NAME AND BRIEF DESCRIPTION OF YOUR CONTRIBUTION HERE] // // INSTRUCTIONS: // // 1. Place this markup in an external .js page and link to it within the // section of your page. // // 2. Create a div within your page to wrap around the content you wish to hide. // You'll place your hidden content in here. The div MUST be in the following // format:

, where: // // a. "foo" is any word of your choice. // b. "-#" is any number between "-1" and "-9". // c. class ALWAYS equals "hidden". // // The "-#" sets the speed at which the box shows/hides itself, with 1 // being slowest and 9 fastest. If you forget to add your speed number // or add it incorrectly, the script will default to 5. // // Here's a proper example: // // // 3. Add onclick="toggle();" and id="toggle" to whatever element you'd like // to use to toggle the hidden content box. MAKE THE TOGGLED // OBJECT/TEXT/BUTTON display:none WITHIN YOUR STYLESHEET! The script will // unhide it. This is so it will not show up when someone has JavaScript // disabled. // // Here's a proper example: // // // 4. Add onload="setup();" to your tag. // // LICENSE: // // This script is protected under General Public License (GPL). Feel free to // redistribute this script, so long as you do not alter any of the contents // specifying authorship. If you add to or modify this script, you may add // your name to the "Other Contributors" list at the top of this script. As // a courtesy, please email me and let me know how you've improved my script! // You may not profit from the direct sale of this script. You may use this // script in commercial endeavors however (i.e. as part of a commercial site). // // Email me here: http://www.paulhirsch.com/contact_me.php // // Copyright 2006, Paul Hirsch. All rights specified herein and within GPL // documentation: http://www.gnu.org/licenses/gpl.txt // ////////////////////////////////////////////////////////////////////////////// // DO NOT TOUCH ANYTHING BELOW THIS LINE // // unless you know what the heck you're doing! // ////////////////////////////////////////////////////////////////////////////// function setup() { var els = document.getElementsByTagName('*'); for (var i=0;i Show/Hide/Slide Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Toggle the header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

*/