Para usar o truque das ‘divs invisíveis’, basta utilizar uma pequena função JavaScript que fará a mágica acontecer.
O que o código realiza, é ocultar uma div que não necessite ser visualizada, dando lugar a uma outra, com base no clique em um link, imagem ou mouseover.
Para isso temos a função JavaScript (existem muitos modos de se realizar essa tarefa), que deve ser colocada entre as tags ‘head’:
JavaScript
function mostraDiv(id,div2) { var divstyle = new String(); divstyle = document.getElementById(id).style.display; var divAux = new String(); divAux = document.getElementById(div2).style.display; if (divAux=="block" || divAux == ""){ document.getElementById(div2).style.display = "none"; } document.getElementById(id).style.display = "block"; return false; }
O que o código está realizando, é uma situação na qual ele verifica se existe uma div já sendo exibida, caso esteja, ele coloca ela como “none” (invisível) e seta a div desejada como “block” (visível). Ao utilizar o block/none ao invés do visibility:hidden/visibility:visible, nós tiramos o espaço alocado para a div que está invisível, tornando-a imperceptível ao usuário que estiver na página.
Para utilizar na sua página, basta incluir o HTML abaixo:
HTML
<a href="#" onclick="displayDiv('teste','teste2')"> </a> <a href="#" onclick="displayDiv('teste2','teste')"> </a> <div id="teste"> teste </div> <div id="teste2" style="display:none;"> teste2 </div>
Fonte: http://msdn.microsoft.com/pt-br/library/hh475808.aspx