<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Efectos jQuery - Ocultar y mostrar</title>
</head>
<body>
<script src="https://tutorialesenlinea.es/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.es/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>