Você tem um link na página. Na hora que você clica, uma nova área na página aparece, "empurrando" todo o resto para baixo. Você clica no link de novo, e tudo volta ao normal. Bacana, né?
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
function mostra(painel) {
if (painel.style.display == "") {
painel.style.display = "none";}
else{
painel.style.display= "";
}
}
</SCRIPT>
</HEAD>
Criamos aqui uma função chamada "mostra", que recebe o parâmetro "painel". Tudo que falamos dentro dele é se ele já estiver sendo mostrado não mostre ("none"), senão deixa como está. Simples, né não ?
Aí no seu HTML:
<BODY>
Se liga na parada. É tipo assim, aqui tem um texto normal. <br>
Aqui em baixo vou fazer um link : <br>
<a href="javascript:mostra(trelele)"> Clica aqui !!! </a> <br>
<div id="trelele" style="display:none">
<font size="7">Apareceu a margarida !!!!</font>
</div>
Se ligô na parada ? E aí aqui continua texto normal. moleza. Olha o tamanho do código, incrivelmente menor.
Assim fica tudo mais simples. <br>
</BODY>
</HTML>
Aqui eu dei nome a um bloco "<DIV>" de trelele (<div id="trelele">), e no href do link, chamei a função passando como parâmetro o trelele : a href="javascript:mostra(trelele)" .
