Efectos jQuery - Ocultar y mostrar

Leer mas...

En este tutorial mostraremos la manera de ocultar y mostrar (Hide and Show jQuery Effects) con jQuery.

Para conseguir que el jQuery funcione tenemos que llamar a la biblioteca de jQuery en este ejemplo vamos a utilizar la biblioteca de Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Luego diseñaremos nuestro HTML a nuestro gusto en este ejemplo vamos a utilizar button = botón. Este elemento crea botones marcadores.

<button class="showHide1">Mostrar ocultar (regular .toggle)</button> 
<button class="showHide2">Mostrar ocultar (Con .slideToggle)</button>
<button class="showHide3">Mostrar ocultar (Con.fadeToggle)</button>

Y por ultimo agregaremos nuestro código de jQuery:

$(document).ready(function(){    
    $('.showHide2').click(function() {
        $('.hiddenDiv').slideToggle("slow");        
    });
    
    $('.showHide1').click(function() {
        $('.hiddenDiv').toggle();
    });        
    
    $('.showHide3').click(function() {
        $('.hiddenDiv').fadeToggle();
    });
});

Ver resultado.