Mostrar contenido oculto JQuery

   Hace algún tiempo que no publico de jQuery, pues bien, hagamos un ejemplo práctico y sencillo. Seguro que muchos han visto como tengo la sidebar del blog para los archivos y enlaces de interes, incluso las entradas de la página principal, eso no es nada más que un efecto toggle, pero ¿que pasa cuando queremos aplicar esto a un div entero?, no es muy estético ni práctico usar "toggle" para todo, es entonces cuando hacemos un script propio, para ello lo primero que debemos hacer es crear el HTML:

  

  

    

      El contenido aqui
    
    

      expandir
    
  

Explicando cada cosa:

 - ContenidoPrincipal: es el div que contiene todo lo que estamos controlando, para no dejar nada fuera de su lugar.

 - DivOculto: es un div temporal que utilizamos para comprobar el estado en que se encuentra el efecto, si esta oculto entonces el div principal esta abierto, de lo contrario esta cerrado.

 - ElSlide: es quien va a contener todo lo que estará dentro del efecto, básicamente sería nuestro contenedor secundario.

 - ContenidoOculto: como dice el mismo id, es el contenido que estará dentro del slide, cuando ocurra el efecto lo que este dentro será lo que se muestre.

 - ElTextoDelEnlace: dentro de el se encuentra el texto, imágenes o lo que queramos mostrar para que el usuario haga el click (utilice texto a modo de ejemplo, pero puedes usar imágenes o lo que gustes).

 - ElEnlace: este es el que hace la magia, es el que dispara el evento para que se haga el resto, como bien dije, puede que prefieras usar una imagen o cualquier otra cosa.

   Hasta aquí todo bien, ahora vamos con el CSS:

body {
  margin: 0;
  font-size:16px;
  color: #000000;
  font-family:Arial, Helvetica, sans-serif;
}

#ContenedorPrincipal {
  margin: 0 auto;
  width: 300px;
}

#ElSlide {
  position: absolute;
  background-image:url(slider.png);
  background-repeat:no-repeat;
  background-position: bottom;
  width: 300px;
  height: 159px;
  margin-top: -141px;
}

#ContenidoOculto {
  margin: 50px 0 0 50px;
  position: absolute;
  text-align:center;
  background-color:#FFFFCC;
  color:#333333;
  font-weight:bold;
  padding: 10px;
}

#ElTextoDelEnlace {
  position:absolute;
  margin: 143px 0 0 120px;
  font-size:12px;
  font-weight:bold;
}

   Y ahora el script:

$(document).ready(function() {
  $("#ElEnlace").click( function() {
    if ($("#DivOculto").is(":hidden")) {
      $("#ElSlide").animate({marginTop: "-141px"}, 500 );
      $("#ElEnlace").html('expandir');
      $("#DivOculto").show();
    } else {
      $("#ElSlide").animate({marginTop: "0px"}, 500 );
      $("#ElEnlace").html('contraer');
      $("#DivOculto").hide();
    }
  });
});

   Básicamente lo importante es la condición [ if ($("#DivOculto").is(":hidden")) ]... Ejemplo

   NOTA: a modo de recomendación, esto por ser un ejemplo utilizo puros ID para relacionar los eventos del script, pero sería mas conveniente utilizar clases, reemplazando todo esto en el CSS y el Script.

Recibe notificaciones por correo