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