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

martes, 11 de diciembre de 2012

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!!!

Seguidores (seguir blog)

Me siguen en google plus: