using SPANs to make stuff disapear

[DanLatimer]

Hey guys,

I found an example somewhere that showed how to make a SPAN tag dissapear and its contents be like removed from the code, and reapear too. like a table in a table and with cellspacing, to make this effect:


<table bgcolor="lightblue" width=150 cellspacing=2>
<tr><td>LINKS</td></tr>
<tr>
<td>
<table bgcolor="white" width=100% cellspacing=0>
<tr><td>HERE IS AN ITEM</td></tr>
<tr><td>HERE IS AN ITEM</td></tr>
</table>
</td>
</tr>
</table>

Most of you have probably saw it before, I want it to be when I click on links the "HERE IS AN ITEM"s dissapear and the white space goes up to readjust for no words being there.

Here is what I have so far:


<table bgcolor="lightblue" width=150 cellspacing=2>
<tr onclick="toggle(HideShow);"><td>LINKS</td></tr>
<tr>
<td>
<span id=HideShow>
<table bgcolor="white" width=100% cellspacing=0>
<tr><td>HERE IS AN ITEM</td></tr>
<tr><td>HERE IS AN ITEM</td></tr>
</table>
</span>
</td>
</tr>
</table>

<script>
function toggle(e) {
if (e.style.visibility == "hidden") {
e.style.visibility = "visible";
}
else {
e.style.visibility = "hidden";
}
}
</script>


if anyone could help me get rid of the extra blue space I would really appreciate that. (you can copy either code straight into a notepad and save it as something.html and it will work as is)

[Rincewind]

Well span is a inline element and tables are block level. You shouldn't really have blocks inside inline elements. However, you can just change span to div and you'll be fine.

The inner table is not really required. You could reduce the amount of code you have quite a bit here. The inner table can be replace by the div that wraps it.

The reason the blue background remains is cause you have made the object (span or div) invisible, but like the invisable man on TV, he still takes up space. the talbe doesn't resize. This problem can be overcome by editing the script to change the overflow value rather than visibility. Overflow is what happens to the text that is too long to fit in an object. By default, overflow is visible. but you can set overflow to hidden. So if the text is to long, it gets cut off.

To do your show and hide. I set the container div to a height of 0px and overflow:visible. so you can see the text. Then I use a minor change in your script to hide the overflow. Suddenly the box is 0px high. So you can't see it. Also since it's size changed, the page redraws to fill the gap that was left.

Here's my code

<table bgcolor="lightblue" width=150 cellspacing=2>
<tr onclick="toggle('HideShow');"><td>LINKS</td></tr>
</table>
<div id=HideShow style="background-color:white; border:2px solid lightblue; width:146px; height:0px;">
<p style="margin:0px;">HERE IS AN ITEM<br>If there are many items<br>use a list not br tags</p>
</div>

<script language="javascript">
function toggle(x) {

e = document.getElementById(x);
if (e.style.overflow == "hidden") {
e.style.overflow = "visible";
}
else {
e.style.overflow = "hidden";
}
}
</script>


Just one last point. Your javascript has another error in it that means it only works in IE. For the onclick call you need to have single quotes inside the bracket. You had onclick="toggle(HideShow);" but it must be onclick="toggle('HideShow');" or else FireFox just won't do it.