Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
eturnkeys
Your Ad Here
Hiding Div Layers After 5 Seconds (Specified Time - X Seconds)
by Ades Tynyshov
Div and Span Tags
by goer
Scrollable Div's
by Joseph Skidmore
How To Create Columns With Div's
by Shruti Gupta
Web Development Tutorials
Rich collection of PHP and MySQL tutorials as well as tutorials on different content management systems.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Web Programming  Home Web Programming JavaScript Toggle Divs
rss

Toggle Divs

Author: ViButX More by this author

Added: Feb 27, 2007 Rating:  Average Rating: 2.73 Votes: 33 Position: 10777 of 13406Average Rating: 2.73 Votes: 33 Position: 10777 of 13406Average Rating: 2.73 Votes: 33 Position: 10777 of 13406Average Rating: 2.73 Votes: 33 Position: 10777 of 13406Average Rating: 2.73 Votes: 33 Position: 10777 of 13406 Level: All levels Software:  DreamweaverGoLiveFrontPage

Toggle DivsI have found a javascript that allows you to toggle a div by the div id, well here it is...

<script language="JavaScript">
function toggle(id){
if (document.getElementById){
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
}
</script>

And if you want the div to be hidden by default just add this to the Javascript:

window.onload = function(){
toggle('page');
}

This part of the code needs to be put in the and section of your website

<html>
<head>
<title>Test</title>

<script language="JavaScript">
function toggle(id){
if (document.getElementById){
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
toggle('page');
}
</script>

</head>

<body>
<a href="#" onclick="toggle('page')" title="">Link01</a><br />
<a href="javascript:toggle('page')" title="">Link02</a>

<div id="page">


<center>
<p align="center">
<br>
Test your HTML here.<br />

<script language="JavaScript" type="text/javascript">
<!--
function preview(){
if(document.pad.text.value.length>0){
pr=window.open("","Preview","scrollbars=1,menubar=1,status=1,width=319,height=300,left=50,top=50");
pr.document.write(document.pad.text.value);
pr.document.close();}
else alert('Learn to code before you put something in...')}
// -->
</script>

</p><form name="pad" method="post">
<font size="1">
<font color="#fefefe" face="tahoma" size="1">
<textarea name="text" rows="12" cols="30">
</textarea>
<br />
<input onclick="preview()" value="Preview" name="view" type="button">&nbsp;
<input value="Clear" name="clear" type="reset">&nbsp;
<input onclick="document.pad.text.select();" value="Select&nbsp;All" type="button">

</font>
</form>
</center>

</div>
</body>
</html>

This part is the div with the id, you can put anything in between the div's

<a href="#" onclick="toggle('page')" title="">Link01</a>

or

<a href="javascript:toggle('page')" title="">Link02</a>

This part is the link to toggle the div visible or non-visible if you are going to change the div id in the code above also change it in the link, you can also use an image to toggle the div just put the image source html code where the Link01, or Link02 text is

Hope, this helped.



Author's URL: www.dannyscripts.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Web Programming  More Web Programming: Most Popular Materials | Fresh Materials | More JavaScript Tutorials at LearnPHP.org
Add comments to "Toggle Divs"