Change to document.forms[0].display Instead of document.layers

I have the following script that does this:
When I click on a link it displays information that are in that div section. When I click on another link, it displays info in that other div section.

However, not all the sections are of equal length, the visibility only hides the info and if any one of the info in a section is short, the scrollbar is still there. I don't want that.

How do I change the code such that I'm using document.forms[0].getElementByID('name').style.display = 'none'; instead?

function showtab(tabnum)
{
var tabname = "tab" + tabnum;
if (tabname != currtab)
{
if (window.document.layers)
{
handle = "window.document.layers";
stylevar = "";
}
else
{
handle = "document.all";
stylevar = ".style";
}
}
eval(handle + '"[' + currtab + '"]' + stylevar + '.visibility = hidden');
eval(handle + '"[' + tabname + '"]' + stylevar + '.visibility = visible');
}

Do you really want to support IE4 and NS4? If you're only concerned with IE5+, Mozilla and other modern browsers, using document.getElementById is enough. But if not, try this code:

function showtab(tabnum)
{
var tabname = "tab" + tabnum;
var handle1, handle2;
if (tabname != currtab)
{
if (document.getElementById)
{
handle1 = document.getElementById(currtab);
handle2 = document.getElementById(tabname);
}
else if (document.all)
{
handle1 = document.all[currtab];
handle2 = document.all[tabname];
}
else if (document.layers)
{
handle1 = document.layers[currtab];
handle2 = document.layers[tabname];
}
if (handle1.style)
{
handle1.style.display = 'none';
handle2.style.display = '';
}
else
{
handle1.visibility = 'hidden';
handle2.visibility = 'visible';
}
}
}

Thanks Glenn, although the user didn't state what are the versions and browser type, we have to simplify the development, the usual constraint, complete fast and on time including all the other modifications that are forever going on.

So, only IE is considered.
;)

Hi Glenn,

The code doesn't seem to work accordingly.

When I click on the 'tabs', everything 'disappears'.

Below is my usage:
<a href="#" onclick="javascript:showtab(1)">Tab 1</a>
<a href="#" onclick="javascript:showtab(2)">Tab 2</a>


I've placed the code in the Header and I've been trying to decipher it to no avail.

Put return false at the end of the function to cancel the href action.

function showtab(tabnum)
{
var tabname = "tab" + tabnum;
if (tabname != currtab)
{
if (document.getElementById)
{
document.getElementById(currtab).style.display = 'none';
document.getElementById(tabname).stye.display = '';
}
}
return false;
}

And then call it like these:

<a href="#" onclick="return showtab(1)">Tab 1</a>
<a href="#" onclick="return showtab(2)">Tab 2</a>

Oh, ok, I'll try it out.

Thanks again!