Her

Home Web Programming JavaScript Toggle Divs

Toggle Divs

Author: ViButX Author's URL: www.dannyscripts.com More by this author
Added:Feb 27, 2007 Rating:   Level: All levels Software: Dreamweaver FrontPage GoLive  

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.