Hace un tiempo publiqué un tutorial explicando como como ocultar o mostrar un elemento, pero también es posible hacerlo con múltiples elementos sin tener que agregar un script por cada elemento, para eso hay que usar id que identifiquen a los elementos y clases para conocer su estado.
Simplemente con fines didácticos he planteado el ejemplo usando el evento onclick y usando clases sin embargo es posible simplificarlo mucho más asignando el click desde jquery y no usando clases sino atributos.
El HTML de los elementos
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="visible" id="item1"> <input type="text" size="25" /> </div> <div class="visible" id="item2"> <input type="text" size="25" /> </div> <div class="visible" id="item3"> <input type="text" size="25" /> </div> <div class="visible" id="item4"> <input type="text" size="25" /> </div> <div class="visible" id="item5"> <input type="text" size="25" /> </div> <div class="visible" id="item6"> <input type="text" size="25" /> </div> |
Es posible usar cuantos elementos se requieran y puede usarse cualquier tipo de elemento no exclusivamente div, basta que les pongamos un id y la clase que me indica su estado (visible/invisible)
Para el menu que muestra u oculta los elementos, sería el siguiente script:
1 2 3 4 5 6 7 8 | <ul> <li><a href="#" onclick="javascript:oculta('item1')">Oculta/Muestra</a></li> <li><a href="#" onclick="javascript:oculta('item2')">Oculta/Muestra</a></li> <li><a href="#" onclick="javascript:oculta('item3')">Oculta/Muestra</a></li> <li><a href="#" onclick="javascript:oculta('item4')">Oculta/Muestra</a></li> <li><a href="#" onclick="javascript:oculta('item5')">Oculta/Muestra</a></li> <li><a href="#" onclick="javascript:oculta('item6')">Oculta/Muestra</a></li> </ul> |
La función para ocultar/mostrar usando jquery
Como vemos el menu invoca a una función llamada «oculta» y le envía como parámetro el id del elemento que queremos ocultar o mostrar según sea el caso, una vez que capturamos ese elemento pasamos a verificar si esta o no visible para finalmente aplicarle una pequeña animación según sea el caso.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function oculta(elemento) { ///// capturamos el elemento item=$("#"+elemento); ///// verificamos su estado if($(item).hasClass('visible')) { $(item).removeClass('visible'); //// cambiamos su estado $(item).addClass('invisible'); //// animamos $(item).slideUp('fast'); } else { $(item).removeClass('invisible'); $(item).addClass('visible'); $(item).slideDown('fast'); } } |
Hola, gracias por el tip! Estoy tratando de implementarlo, pero me genera un error de js, aqui mi codigo:
String.prototype.startsWith = function(str)
{return (this.match(«^»+str)==str)}
function oculta(elemento) {
var divs=document.getElementsByTagName(‘div’)
for (var i=0;i<divs.length;i++){
var strName = divs[i].id;
if (strName != '') {
if (strName.startsWith(elemento)) {
alert("|"+strName+"|");
///// capturamos el elemento
item=$("#"+strName);
///// verificamos su estado
if($(item).hasClass('visible')) {
$(item).removeClass('visible');
//// cambiamos su estado
$(item).addClass('invisible');
//// animamos
$(item).slideUp('fast');
} else {
$(item).removeClass('invisible');
$(item).addClass('visible');
$(item).slideDown('fast');
}
}
}
}
}
Especificamente en "item=$("#"+strName);" donde me dice "Message: Object expected". El alert "alert("|"+strName+"|");" me da el nombre del div correctamente. Alguna idea por que no funciona?
¿Haz incluido el jquery o estás usando prototype?
¿Y como sería si la instancia inicial fuera invisible?
gracias por el tuto justo lo que buscaba
porque en ie7 no puedo ejecutar el demo??
con mozilla ok
safari ok
chrome ok
pero el maldito explorer(y es el que mas utilizan los usuarios)
eso no funciona en ie6; internet explorer 6 fuck..!#$%#$%#$#&#$$&%/%$&/%&(/%
miguel muy bien ejemplo, pero tengo que confirmarte que en IE 8 no funciona..
Hola, gracias por poner la información.
Bueno, mi problema es al querer hacerlo al revés, hacer que aparezca oculto y al clicar se muestre.
Poniendo «invisible» al div como clase, no funciona. Se muestra al inicio.
En la hija de estilos he puesto:
.invisible
{
display: none;
}
y al Div que se tiene que mostrar «class=»invisible»
Así funciona, el problema es que la primera vez que se clica, aparece el contenido de golpe (sin animación) y seguido se esconde con la animación.
¿Me podrías decir que tengo que hacer para que funcione como digo?
Muuuuuuuuuuuuuuchas gracias, estoy aprendiendo a usar Jquery y esto me ayudo mucho para poder implementar un trabajo que estoy haciendo, repito muchas gracias! 😀