mostrar ocultar div con JQuery y Javascript

mostrar ocultar div con JQuery

mostrar ocultar div con JQuery y Javascript

con jQuery puedes ocultar y visualizar elementos HTML utilizando los métodos hide() y show()

Como puedes ver en el cuerpo de este ejemplo, tenemos un DIV  llamado texto con un texto dentro, y  también tenemos dos botones,  uno llamado o identificado con ocultar y otro llamado o identificado con mostrar.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ocultar").click(function(){
$("#texto").hide();
});
$("#mostrar").click(function(){
$("#texto").show();
});
});
</script>
</head>
<body>
<div id="texto">Pulsa en el botón de ocultar para ocultar este texto.</div>
<button id="ocultar">Ocultar</button>
<button id="mostrar">Mostrar</button>

</body>
</html>

Como puedes ver en el cuerpo de este ejemplo, tenemos un DIV  llamado texto con un texto dentro, y  también tenemos dos botones,  uno llamado o identificado con ocultar y otro llamado o identificado con mostrar.

En la parte del encabezado tenemos la llamada a la Libreria jQuery y en la parte de programación controlamos los eventos de click para cada uno de estos botones,  uno utiliza el metodo hide() para ocultarlo y otro utiliza el metodo show para mostrarlo.

$("#ocultar").click(function(){
$("#texto").hide(1000);
});
$("#mostrar").click(function(){
$("#texto").show(1000);
});

dentro de estas funciones y como parámetro puedes poner la cantidad de milisegundos qué quieres que tarde en ocultarse o mostrarse con esto creas una pequeña animación para mostrar o ocultar el DIV

también puedes utilizar el metodo toggle de jQuery para mostrar y ocultar un DIV

como si fuese un conmutador es decir pulsas y se oculta, vuelves a pulsar y se muestra

así ves lo fácil que es mostrar y ocultar el contenido que tú quieras de tu web

$("#conmuta").click(function(){
$("#texto").toggle(1000);
});
............
<button id="conmuta">Conmuta</button>
</body>
</html>

y para conseguir el efecto persiana en el que muestra y oculta un DIV puedes utilizar los siguientes métodos o ver la siguiente entrada de cómo crear el efecto persiana o cortina

slideDown();
slideUp();
slideToggle();