Esto es algo bien útil a la hora de estar desarrollando una web o un sistema. Normalmente se podría hacer algo cómo esto en javascript:

• caso 1: Si se requiere ocultar si está visible, y hacer visible si está oculto.

function toggle(objID){
	document.getElementById(objID).style.display = (document.getElementById(objID).style.display == ''?'none':'');
}

Se usaría así:  toggle('idOcultar');

• Caso 2: Si se require ocultar o mostrar en cualquier momento, es algo parecido

function show(objID, isShow){
	document.getElementById(objID).style.display = (isShow?'':'none');
}

Se usaría así:	show('idOcultar',true) //Para mostrar
		show('idOcultar',false) //Para ocultar

• Caso 3: Si se cuenta con mootools, el procedimiento se vuelve más agradable

Element.extend({
	show: function(){ this.setStyle("display", "");},
	hide: function(){ this.setStyle("display", "none");}	
});

Y su uso, que es la parte agradable, sería así:
	$('idOcultar).show(); //Para mostrar
	$('idOcultar).hide(); //Para ocultar

• (actualización) caso 4: controlarlo con css

No sé cómo se me fue esta, ya que es la que utilizo, pero muchas gracias proclamo por su comentario. La función toggleClass de mootools agrega una clase a un elemento si es que no existe, y si es así, la quita de ahí. de tal forma que no ocuparíamos una función adicional, solamente

	$('idOcultar).toggleClass('hidden'); 

//Si ya cuenta con la clase la quita, mostrando así el elemento, y si no cuenta con la clase, la agrega, ocultando el elemento.

	Adicionalmente, necesitamos un estillo css como este

	.hidden{ display:none; }

Esto es para que funcione como el caso 1. Si queremos forzar a mostrar, o a ocultar, como los casos 2 y 3, entonces:

	$('idOcultar).addClass('hidden'); //forza a ocultar

	$('idOcultar).removeClass('hidden'); //forza a mostrar

Leave a Reply