Hide and Show com javascript

[Rogerio kleinkauf 0]

Usando javascript vamos ver como é possivel fazer um div “sumir,desaparecer” usando javascript;

 

Bassicamente consiste em um link chamando a função em javascript e uma div que irá “sumir, desaparecer”;

 

Implementando a função em javacript;

<script type="text/javascript">
 function hideandshow(){ /* Função hideandshow / Function hideandshow  */
 if(document.getElementById('comments').style.display == 'inline'){
 document.getElementById('comments').style.display = 'none';
 }else{
 document.getElementById('comments').style.display = 'inline';
 }
 }
</script>

Função de nome hideandshow irá verificar o estado atual do ‘display’ da div ‘comments’, caso seja ‘inline’ a função assim que chamada mudará o ‘display’ para none, e vice-verça;

 

Div ‘comments’ css;

#comments{
display:none; /* Estado inicial da div / Iticial state for the div */
}

Div ‘comments’ code;

Exemplo / Sample

 

Botão/Button;

<a onclick="return hideandshow();" href="#">
Click
</a>

 

EXEMPLO

XHTML 1.1 VALID

DOWNLOAD

VISAOSOFT BLOG

[William Bruno 1501]

Melhorando um poco o código:

<script type="text/javascript">
/**
 *	Função hideandshow / Function hideandshow  
 */
function hideandshow( id )
{
	var el = document.getElementById( id );
	if( el.style.display != 'none' )
		el.style.display = 'none';
	else
		el.style.display = 'inline';
}
</script>

e então, temos mais flexibilidade e reaproveitamento, já que a função recebe como parâmetro o elemento em quem deverá aplicar o toggle de mostrar/esconder

<a href="#" onclick="hideandshow('comments'); return false;">
Click
</a>