Your Ad Here

Toggle Divs


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="/img_articles/11109/#" 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="/img_articles/11109/#" 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: ViButX
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Web programming � everything from the basics of visual design and architecture to the specifics of applications, graphics, and scripting. More Web Programming: Most Popular Materials | Fresh Materials | More JavaScript Tutorials at LearnPHP.org

Add comments to "Toggle Divs"

Only registered users can write comment

Reader's comments