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>