Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/load_globes.php on line 22

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/thescrip/public_html/jclass/load_globes.php:22) in /home/thescrip/public_html/jincludes/globals.php on line 43

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/thescrip/public_html/jclass/load_globes.php:22) in /home/thescrip/public_html/jincludes/globals.php on line 43

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/load_globes.php on line 22

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61

Warning: Creating default object from empty value in /home/thescrip/public_html/jclass/db_func.php on line 61
Javascript Show / Hide DIV Tag Elements
TheScriptCenter.com


print page

Show / Hide Div Tag

Javascript Show/Hide

Code Snippet

Here's a simple little script that allows you to take the contents of a

tag on your web page, hide the contents, then show them when a user clicks the hyperlink. I use this frequently on my websites. In this script, I included an open and closed arrow with this example as well. 

 

show hide my div tag SHOW/HIDE MY HIDDEN DIV TAG

 

Code

<a href="javascript:jchange('jdiv');">Your Text Here</a>
<div id="jdiv" style="display:none;">
JavaScript Hidden Div tags can be used for a variety of different things. Perhaps a more information link, or anything you can think of. Click the above link again to hide this paragraph. Or <a href="javascript:jchange('jdiv');">Close (X)</a>.
<script language="javascript" type="text/javascript">
function jchange(o) {
var fold_image = new Array();
fold_image[0] = "/images/openarrow.gif";
fold_image[1] = "/images/closedarrow.gif";
if(document.getElementById(o).style.display=='none') {
document.getElementById(o).style.display='block';
if(document.getElementById('nfolding')) {
document.getElementById('nfolding').src=fold_image[0];
}
} else {
document.getElementById(o).style.display='none';  
if(document.getElementById('nfolding')) {
document.getElementById('nfolding').src=fold_image[1];
}
}
} </script>