Ver ❯
Herramientas SEO
Tamaño del resultado:
668 x 574
×
Cambiar Orientacion
Cambiar tema, Oscuro/Luz
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Efectos jQuery - Ocultar y mostrar</title> </head> <body> <script src="https://tutorialesenlinea.descargarjuegos.org/engine/classes/min/index.php?g=general3"></script> <h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Efectos jQuery - Ocultar y mostrar</h1> <div> <button class="showHide1">Mostrar ocultar (regular .toggle)</button> <button class="showHide2">Mostrar ocultar (Con .slideToggle)</button> <button class="showHide3">Mostrar ocultar (Con.fadeToggle)</button> </div> <br> <div class="hiddenDiv" style="width: 200px; border: 2px solid #0014ff; padding: 8px; display: none;"> Mostrar / Ocultar Div oculto utilizando el controlador de eventos .click y la acción .toggle <br><br> <img src="https://tutorialesenlinea.descargarjuegos.org/templates/tutorialesenlinea/imagenes/touch-icon-ipad-retina.png"> </div> <script> $(document).ready(function(){ $('.showHide2').click(function() { $('.hiddenDiv').slideToggle("slow"); }); $('.showHide1').click(function() { $('.hiddenDiv').toggle(); }); $('.showHide3').click(function() { $('.hiddenDiv').fadeToggle(); }); }); </script> </body> </html>