Resolved Manipulating DIV visibility script problem

[ARCLite Studio]

Hey everyone,

Here is the HTML snippet, (Yes, I have the script tag in the header calling to functions in an external JS file)

<a href="#" onclick="disp('block2');disp('block3');showh('block1');fade(block1');">
BUTTON 1</a>
<a href="#" onclick="disp('block1');disp('block3');showh('block2');fade('block2');">
BUTTON 2</a>
<a href="#" onclick="disp('block1');disp('block2');showh('block3');fade('block3');">
BUTTON 3</a>
<!-- START DIVS HERE -->
<div style="opacity:0; display:none; color:#FFF;" id="block1">aaaaaaaaaaaaaaaaaa</div>
<div style="opacity:0; display:none; color:#FFF;" id="block2">bbbbbbbbbbbbbbbbb</div>
<div style="opacity:0; display:none; color:#FFF;" id="block3">ccccccccccccccccc</div>

Here is the Javascript

var TimeToFade = 1000.0;

function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
    if(element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1')
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }
   
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}
function animateFade(lastTick, eid)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

function showh(id) { 
 var e = document.getElementById(id); 
 if(e.style.display == 'block')
  e.style.display = 'none'; 
 else 
  e.style.display = 'block'; 
}

function disp(id) {
	var e = document.getElementById(id);
	e.style.display = 'none';
	e.style.opacity = '0';
	}

PROBLEM: If I click on "button 1" the content of the block1 becomes visible and fades in. (CSS display property changes to block, fade() function runs) on a second click of "button 1" it reverses, (CSS display property changes to none, fade() function runs) content goes away and the DIV is taken out of the nesting thus allowing block 2 or block 3 to occupy the same space on the webpage. --- This is all correct but the problem i'm having is that when I click on "Button 1" and then my next click is "Button 2" I get the content of both DIV's (block1 + block2) displayed one above the other, I can't seem to find the right scripting to force only 1 of the DIV's to be in the visible state at one time. In other words if I click "button1" and have BLOCK1 open and then click "button2", I want BLOCK1 to FADE the content out and then set CSS visibility:none

I have tried several code variations but no matter what i do something keeps getting the "opacity" state of the DIV's screwed up, so a button click causes a DIV to become visible but instead of fading content IN it shows as if the content opacity was set to 1 and fades it OUT, when in fact its CSS opacity SHOULD have been at 0 at the time the script ran. - Sorry if this is long but I'm trying to be sure i get the idea across right. Thanks for any help or suggestions.