jQuery es una biblioteca de jаvascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de jаvascript más utilizada. 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();
});
});
Comentarios