Leer mas... 34a5n
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.
La etiqueta de HTML <button> representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando CSS.
<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();
});
});