show - hid div

cant seem to remove the gap?

[tonynoriega]

i am using a very simple show hide javascript:

function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="/_images/plus.jpg">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="/_images/minus.jpg">';
}
}

and on the page i have it set up as:

<div id="show-hide-box">
<div id="titleTextImg">
<a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="/_images/plus.jpg" style="border:0 none;" /></a>Title Here
</div>

</div><!--/show-hide-box-->

<div style="DISPLAY: none" id="contentDivImg">

Content here
</div>

and here is the CSS:

#show-hide-box {
background:#c6c1b8;
margin:0;
padding:0;

}

#titleTextImg{
background:#33ffae;
margin:0;
padding:0;
}

#contentDivImg{
background:#aeaeae;
padding:0;
margin:0;
}

but for some reason, when you click on the plus to expand and show the hidden div, there looks to be a paragraph break between the two boxes.... what am i doing wrong?

does the fact that they are displayed as block elements automatically add a margin?

[rocknbil]

Not getting that here, but I don't have your images, so I had to substitute plain text for the images (see example below.) Tested in IE 7 and FF.

And maybe that's the problem, the images are "too big" forcing the content div down?

Unrelated, but per our discussions about progressive enhancement, do this

<a id="imageDivLink" href="#" onclick="return toggle5('contentDivImg', 'imageDivLink');">IMAGE HERE</a>

Then in toggle 5, add at the bottom,

function toggle5(showHideDiv, switchImgTag) {
//etc.
return false;
}

In the best of all worlds, # will actually be "content.html" but we do what we can . . .