Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Mostrar y Ocultar Contenido con jQuery opción 2
#1

En la entrada anterior se puede observar una manera sencilla de ocultar y mostrar contenido de manera dinámica utilizando jQuery y CSS.

En esta ocasión, les traigo una forma parecida a hacerlo; solamente que ahora, no vamos a editar las propiedades CSS de la capa a ocultar; utilizaremos directamente una manera un poco más elegante y simplificada; que es utilizando directamente las propiedades de jQuery. Aunque obviamente, para que la función sepa si tiene que ocultar o mostrar el contenido, vamos a consultar las propiedades que la capa tiene en el momento en que el lanzador el clickeado.

Lo único que se debe hacer es cambiar (tomando en cuenta la entrada anterior) lo siguiente:

Código:
<script language="javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#ocultarmostrar").click(function(){

var a = jQuery("#caja");
var propiedad = a.css("display");
if (propiedad=="block"){
a.css("display", "none");
}else{
a.css("display", "block");
}
})

})
</script>

Por lo siguiente:

Código:
<script language="javascript">
jQuery.noConflict();    
jQuery(document).ready(function(){
            jQuery("#ocultarmostrar").click(function(){
                
                var c = jQuery("#caja");
                var mostrandose = c.css("display");
                if (mostrandose=="none"){
                    jQuery('#caja').show("100")
                }else{
                    jQuery('#caja').hide("100")
                }
            })
            
        })
    </script>

De igual forma, les voy a dejar un archivo donde puede ver la transición funcionando.

Desde mi punto de vista, es recomendable utilizar esta forma, pues se ve algo más elegante y se nota la transición de ocultar/mostrar la capa.

Sin más, DEMO:

http://juliohurtado.com/wp-content/uploa...Query.html


[Imagen: 88x31.png]
Artículo publicado con Licencia Creative Commons. (Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0))

Si deseas publicarlo en otros sitios tendrás que publicar la licencia, la fuente, y la autoría.

Fuente: Mostrar y Ocultar Contenido con jQuery y CSS
WWW
#2
Queda muy bueno, quizás lo utilice para algunas cosas.

gracias juliens Sonrisa
#3
Muchas gracias @Juliens Seguro qeu a muchos les resulta muy útil, auqnei en estas cosas siemrpe es mejor trabajar con css y asi no se sobrecarga la web
WWW
#4
De nada @niqo

No sobrecarga la página @papi

La librería de jQuery apenas y pesa, además de que es mucho más fácil y optimizado utilizar jQuery.

Solamente está llamando a dos propiedades del jQuery y ya.

Me parece que con CSS3 se podría realizar la misma transición, pero no se como se podría hacer; quizá, de igual forma utilizando javascript directo para cambiar las propiedades del CSS, pero con jQuery me parece más sencillo y optimizado.
WWW
#5
estupendo entonces, amigo. Estas hecho un fenómeno con esto del codigo Guiño
WWW
#6
Siempre quise implementar esto, en WP, sirve? si alguien sabe de algun tuto, me puede ayudar, pro fa! Gracias, muy bueno el post
#7
Yo quise ponerlo en Worpress pero no logro hacerlo xD

Quizá sea de editar algún archivo, sigo investigando, si logro hacerlo te aviso y poste el tuto.
WWW
#8
muy buen eso tipo de Spoiler, me gustaria usarlo
#9
Buen aporte ya lo tengo en mi sitio
#10
:o esta muy bueno, sigue aportando mas cosas asi


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  jQuery: ocultar imágenes rotas Jvh_22 10 782 03-01-2017, 09:26 PM
Último mensaje: gassip
Estrella [Aporte] La nueva generación de jQuery tendrá cambios en su nomenclatura carlsmartg 1 338 03-08-2016, 09:23 PM
Último mensaje: Boreas
  [Duda] Como implementar Jquery.cookie llProKsll 3 429 11-02-2016, 01:55 PM
Último mensaje: Vicen
Pregunta [Tutorial] Como montar tu propio gestor de contenido en localhost rodrigo5559 8 911 30-01-2016, 04:31 PM
Último mensaje: AbaddonOrmuz
Información [Tutorial] Detectar AdBlock y mostrar mensaje (jQuery) DarkMaster 7 742 28-01-2016, 03:32 PM
Último mensaje: TapaJerez
  Libro de jQuery en español CarlosAlberto 1 452 30-12-2015, 11:39 PM
Último mensaje: habacuc78
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 328 16-08-2015, 02:02 AM
Último mensaje: luis.ml
  Configurar Mostrar indice de archivos en una carpeta por .htaccess Kevin9908 0 378 01-07-2015, 02:23 AM
Último mensaje: Kevin9908
Ladrillo Como usar botones "disabled" y activarlos por JQuery Kevin9908 0 393 25-06-2015, 04:38 PM
Último mensaje: Kevin9908
  [PHP] Leer y mostrar archivo de texto torgar22 0 827 28-02-2015, 02:36 PM
Último mensaje: torgar22



Usuarios navegando en este tema: 1 invitado(s)