DIV toggle vs. innerHTML 1

[jl8789]

I have 2 divs coded as such:
<div id="albumTitle"><a href="">2004 KTM 200 EXC</a> <a href="javascript:toggleDIV('editTitle','albumTitle');"
>edit</a></div>
<div id="editTitle" style="visibility:hidden">
<!--- <span>edit title:</span><br />--->
<input type="text" id="newTitle" value="2004 KTM 200 EXC" /><br />
<!--- <input type="button" value="Save" onclick="submitTitle(1505632, document.getElementById('newTitle_1505632').value, false);" />--->
<input type="button" value="Cancel" onclick="toggleDIV('albumTitle','editTitle');" />
</div>

My function:
<script language="JavaScript">
function toggleDIV(show,hide)
{
var obj= document.getElementById(show);
obj.style.visibility = "visible";

var obj1= document.getElementById(hide);
obj1.style.visibility = "hidden";
}
</script>

So when I click on the edit link, the editTitle div is displayed below the albumTitle div. I would prefer that it appears to replace the albumTitle div so that there is no extra space when the div is hidden etc. Do I need to use scripting and set the innerHTML property to achieve all of this? Or is there a way to simply toggle the Divs and have code that replaces each other. The editTitle div takes up a bunch of space before the next HTML is reached as well...I want to try to not show the space where the div is. Looking at innerHTML it appears this would be the way to go, but am just wondering if it can be done with different styles of divs or something.

THANK YOU!!!!

 

[BabyJeffy]

Something like this then...

<script language="JavaScript">
function toggleDIV(show,hide)
{
    var obj= document.getElementById(show);
    obj.style.[COLOR=red]display = ""[/color];

    var obj1= document.getElementById(hide);
    obj1.style.[COLOR=red]display = "none"[/color];
}
</script>

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[jl8789]

Yes. Exactly what I needed.

Thank You!