Google+ Mostrar y ocultar un div o elemento con jquery - slideToggle - Miopiblog

Mostrar y ocultar un div o elemento con jquery - slideToggle

En esta ocasión te voy a explicar como mostrar u ocultar un div con jquery. En el post anterior te mostraba que es lo que tienes que hacer para comenzar a trabajar con jquery, además de explicarte como incluir el framework o libreria en tu sitio web.

Pues bien, contando con que ya tenemos la librería o framework jquery incluida en nuestro sitio web, esto no debe resultar nada de complicado. Lo primero que vamos a hacer, es crear un código que nos va a servir, en este caso, para mostrar u ocultar un div, según cual sea su estado. 

En primer lugar vamos a hacer que nuestro código solo entre en funcionamiento cuando la página esté cargada. Para ello creamos el siguiente fragmento de código:


<script type="text/javascript">
$(document).ready(function() {
// Aquí va el resto del código que solo se ejecutará cuando la página haya cargado.
});
</script>

A continuación, voy a seleccionar el botón llamado "mostrarocultar" y voy a asignarle un comportamiento mediante el método click, es decir, le voy a indicar que realice algo al hacer click sobre el botón llamado "mostrarocultar":


<script type="text/javascript">
$(document).ready(function() {
$('#mostrarocultar').click(function() {
});
});
</script>

Y finalmente, voy a asignar un efecto al objeto o div, que será el que se oculta y muestra:

<script type="text/javascript">
$(document).ready(function() {
$('#mostrarocultar').click(function() {
$('#divmostoc').slideToggle(2500);
});
});
</script>

Con el método slideToggle, conseguimos que si el div está oculto se muestre y si es visible, que se oculte. Este es uno de las utilidades de jQuery que más me gustan y de las mejores, en mi opinión.

Lo único que nos queda por hacer, es incluir nuestro código jQuery finalizado, junto a un botón y un div o elemento en nuestro sitio web. Este botón y este div nos sirven perfectamente:

<input type="button" id="mostrarocultar" value="Mostrar / Ocultar" style="font-size:14px;cursor:pointer;margin:15px;padding:5px;"/>

<div id="divmostoc" style="background:#000000;display:none;width:100px;height:100px;"></div>

Colocamos todo entre las secciones <body> y </body> de la página en la que queremos realizar este efecto jquery y lo subimos mediante FTP o como prefieras y... a probar!!! jeje!!!

Aquí tienes un ejemplo de como funciona lo que acabamos de hacer:



Y aquí te he colocado el vídeo que he realizado por si necesitas un poco más de ayuda : -)




Si no te gusta como se muestra / oculta el div, o quieres aprender más sobre jQuery, te invito a que des un paso más, y aprendas el método fadeToggle de jQuery. Espero que te guste, recuerda que estaré encantado de que me sigas en las redes sociales.
Un Saludo!!!
Me siguen en google plus: