...

View Full Version : Show/Hide Form Sections On Click



jianneng
07-01-2004, 05:17 AM
Hi, I wonder if Javascript can do this...

As you can see in my attached form image, I have a huge form. Rather than showing all the sections (Part 1, Part 2...), I am thinking of allowing users to just click the title, e.g. Part 1a: Key Information and the section related to it will be shown, otherwise, if the user clicks the same title again, the section will be hidden again. This applies to all other parts.

Thanks in advance for any help/reference for this.

jianneng
07-01-2004, 09:21 AM
Hmm...I think I may have found what I want...in fact, in this CodingForums main page, there is a small minus/plus icon on each forum section. Clicking each will collapse or expand each section..

Time to try the source code out. :)

Kor
07-01-2004, 09:23 AM
Yes, see this example:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function showF(f){
if(document.getElementById(f).style.display=='none'){
document.getElementById(f).style.display='inline';
}
else{document.getElementById(f).style.display='none';}
}
</script>
</head>

<body>
<form>
<a href="#" onclick="showF('f1');return false" style="position:relative">part 1</a><br>
<div id="f1" style="position:relative;display:none">
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
</tr>
</table>
</div>
<a href="#" onclick="showF('f2');return false" style="position:relative">part 2</a><br>
<div id="f2" style="position:relative;display:none">
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
</tr>
</table>
</div>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum