JQuery permite ocultar/mostrar elementos de forma muy sencilla, para ello vamos a utilizar los metodos hide() y show(), ocultar y mostrar respectivamente.
Lo primero que tenemos que hacer es descargar JQuery en su versión mas reciente, lo puedes hacer AQUI.
Ahora tenemos que agregarlo a nuestra pagina Html, algo asi:
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
Vamos a crear nuestra estructura html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ocultar elementos | JQuery</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Ocultar y mostrar elementos con Jquery</h1>
<p> <button type="button" id="mostrar">Mostrar</button>
<button type="button" id="ocultar">Ocultar</button>
</p>
<p id="parrafo">
Sed egestas, ante et vulputate volutpat, eros pede semper est,
vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing,
commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor.
Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis,
mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede
arcu, dapibus eu, fermentum et, dapibus sed, urna.
</p>
</body>
</html> Ahora vamos a generar el código JQuery para ocultar/mostrar el párrafo:
<script type="text/javascript">
$(document).ready(function() { // Cuando el documento este listo.
$("#mostrar").on("click", function() { // Cuando se detecta clic en el boton mostrar
$("#parrafo").hide("slow"); //Aqui le pedimos que oculte(hide) el id 'parrafo' y le agregamos un efecto 'slow'
});
$("#ocultar").on('click', function() { // Cuando se detecta clic en el boton ocultar
$("#parrafo").show("slow"); }); //Aqui le pedimos que muestre(show) el id 'parrafo' y le agregamos un efecto 'slow'
});
</script> Todo este código lo puedes introducir inmediatamente después de incluir el jquery y antes de cerrar la etiqueta </head>
Puedes ver su funcionamiento AQUI.
Si te fue útil, no te olvides suscribirte a nuestro blog y podrás recibir todos los nuevos artículos en tu cuenta de email.
