Ocultar/Mostrar
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
proclamo said,
Wrote on August 21, 2007 @ 8:39 pm
En Mootools existe la función toggleClass() que sirve para cambiar a un elemento la clase css. Con eso no sólo se puede mostrar y ocultar, sino también redimensionar, cambiar de color,etc, todo lo que se puede hacer con css.