Jquery: ocultar mostrar varios elementos
Categories: javascript - Tags: AJAX, jqueryHace 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'); } } |
Últimos Comentarios