hiding/showing the contents of a div

Forum Moderators: open

Message Too Old, No Replies

hiding/showing the contents of a div

Ashy

10:09 pm on Jul 27, 2005 (gmt 0)

Hi,

On a form im building, I have a section that I want to only be viewable if the user clicks a button/link.

Basically my form is in a table, ive split it into 2 divs - part1, part2. I want part2 hidden initially and when the user gets to it they decide if that section is applicable and if so click a link and it shows the part2 bit of the form.

Does anyone know any tutorials showing how to do this?

Thanks in advance,
Ash

moltar

11:03 pm on Jul 27, 2005 (gmt 0)

You can do this with javascript. Hide the

div

by default with

display: none;

CSS property. The link or button should have

onclick

event that will change the

display: none;

display: visible;

moltar

11:19 pm on Jul 27, 2005 (gmt 0)

Here is a full working example:


<!doctype html public 
"-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
  
<title></title> 
  
<style type="text/css" media="screen">  
div.visible { 
display: visible; 
} 
div.hidden { 
display: none; 
} 
</style> 
  
<script type="text/javascript"> 
function part2() { 
var part2 = document.getElementById('part2'); 
if ( part2.className == 'hidden' ) { 
part2.className = 'visible'; 
} else { 
part2.className = 'hidden'; 
} 
} 
</script> 
</head> 
  
<body> 
<div id="part1"> 
<p><a onclick="part2();" href="#">show part 2</a></p> 
</div> 
  
<div id="part2" class="hidden"> 
<p>This was hidden.</p> 
</div> 
</body> 
  
</html>

cuce

11:23 pm on Jul 27, 2005 (gmt 0)

Here's the show/hide javascript thats built into dreamweaver.


function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
 var i,p,v,obj,args=MM_showHideLayers.arguments;
 for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
 if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
 obj.visibility=v; }
}

I'm sure it could be trimmed/optimized, but it works.

Here's the html you'll have to use:

<div id="divid">this is the div you want to hide until it is clicked on</a>


<a href="#" onmouseover="showHideLayers('divid','','show')">Show the Hidden Div</a>

cuce

11:24 pm on Jul 27, 2005 (gmt 0)

haha i'm too slow :)

Ashy

8:26 am on Jul 28, 2005 (gmt 0)

many thanks, ill give that a go later :)

bruhaha

1:35 pm on Jul 28, 2005 (gmt 0)

Moltar:

function part2() {
var part2 = document.getElementById('part2');

I see how this works, but rather than writing the function for just one id, shouldn't the code be made more generic so that you could use it in more than one place on a page?

bruhaha

2:33 pm on Jul 28, 2005 (gmt 0)

Here's the sort of code I have used. (Note that it can be used to hide/show any number of sections on the same page.)

In the HEAD:
<script type="text/javascript">
function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}
</script>
<style>

.hidden {display:none;}
.explain {text-decoration: underline}
</style>

In the BODY:
<p>First part of section 1
<div onclick="show('sec1part2'); hide('explain1')" class="explain" id="explain1">more</div></p>

<div id="sec1part2" class="hidden">
<p>The rest of section 1</p>
<div onclick="hide('sec1part2');show ('explain1')" class="explain">close</div></div>

cuce

9:29 pm on Jul 28, 2005 (gmt 0)

thanks bruhaha
That chunk of code needed a serious trim :)

bruhaha

12:40 pm on Jul 29, 2005 (gmt 0)

Incidentally, in all these cases of changing styles via onClick (or onMouseover, or whatever), it is possible, sometimes desirable, to change more than one feature.

If so, in place of:
document.getElementById(id).style.display = 'block';

use:
document.getElementById(id).className = 'vizbl';

Then, in the stylesheet, declare whatever styles you need for that class.

Ashy

12:20 am on Jul 30, 2005 (gmt 0)

I managed to get moltars version working and its great for what I need (cheers!), however - is it possible to set the focus on the area that has been made visible, the form is a bit long and its not always obvious another part of it has opened up.

Thanks in advance,
Ash

moltar

1:27 am on Jul 30, 2005 (gmt 0)

there is a focus attribute in javascript.

In javascript:

document.getElementById('some_name').focus();

In HTML:

<input type="text" id="some_name" />