[thelist] Show Hide With Java Script Not Reducing Space

Sat Jan 29 11:22:59 CST 2005

List,
   
    The Situation:
    What I would like to do is make a set of DIVs, each with a 
descriptive heading above them. When the heading is clicked on, the div 
becomes shown. When clicked again, the DIV is invisible, and the 
headings collapse down to save space.

    What I've Done So Far:
    I acquired some code from the net and tried my best with it, despite 
not understanding Java Script very well. However, I have accomplished 
making the DIVs visible or invisible depending on whether or not the 
heading has been clicked.

    The Problem:
    First off, it should be noted that I am very unfamiliar with Java 
Script and it's syntax. Please explain things in simple terms.
    The problem is that when the DIVs are invisible, there is still the 
same amount of space between headers.

    Additional Notes:
    Inside the DIV that I want to show/hide is a form. I don't know if 
that has any impact or not.

    Further Intentions:
    Also, to press further, I'd like to have a "+" beside the link when 
the DIV is invisible, and a "-" beside the link when it's visible. I've 
seen this effect, or similar effects with images, on web sites, but the 
Java Script was too complicated for me to follow. Any chance anyone 
could explain how that's done, or point me to a decent web tutorial on 
the matter?

    Any assistance would be greatly appreciated.

    For Reference:
    Following is the code I have so far.

Script inside the <head> ----------

 <script language="javascript">
<!--
var state = 'hidden';

function showhide(layer_ref) {

if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}
//-->
</script>

As applied in the <body> --------------

<h3><a href="javascript://" onclick="showhide('topPageThumb');">Images For Top Page</a></h3>
<div  id="topPageThumb" style="visibility:hidden;">

<p>To change the image, select a new image here:</p>
<form enctype="multipart/form-data" action="" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="8192">
<p>
<input name="upfile" type="file">
<input name="store_dir" type="hidden" value="inline/comedynight/" />
<input type="submit" name="Upload" value="Upload">
</p>
<p>This is the image that will appear on the top page along with a link to the page with information about the show.</p>
<img class="inline" src="inline/comedynight/toppagethumbnail.jpg" alt="Thumbnail for top page" /></form>

</div>

-- 
Dave Gutteridge
dave at tokyocomedy.com