Aprende como mostrar informacion oculta de una sección desplegable al presionar un boton con Jquery.

Share on Pinterest
Comparte con tus amigos










Enviar

Hoy en este tutorial aprenderemos como hacer una Sección Desplegable para nuestros sitios web. Y con sección desplegable me refiero a una parte de nuestro sitio que estará oculta hasta que el usuario presione un botón para mostrarla.

Ejemplo:

Como hacer una Sección Desplegable con HTML, CSS (SASS) y Jquery

En esta sección oculta podemos mostrar contenido extra de nuestros sitios, promos, formularios para suscribirse a un newsletter o lo que tu quieras.

Como ya pudiste ver en el .gif anterior, un ejemplo de una sección de este tipo lo podemos encontrar en la pagina de logitech en donde tienen si los usuarios presionan el gran botón amarillo les aparecerá una nueva sección con una pequeña promo de su sitio.

El demo desde su pagina lo puedes ver aquí (aunque no sabemos hasta cuando estará el efecto):

http://www.logitech.com/es-roam/home

Lo que nosotros realizaremos es exactamente lo mismo, una sección oculta que aparecerá al mostrar un botón de nuestra pagina. Como siempre, aquí también te explicaremos como hacer esta sección adaptable a dispositivos móviles. Desde smartphones hasta tablets.

Demo del sitio que estaremos realizando:

http://falconmasters.com/demos/toggle-section/

Recursos a utilizar:

Jquery: http://jquery.com/

Normalize CSS: http://necolas.github.io/normalize.css/

Colors: http://clrs.cc/

Tutorial como hacer una sección desplegable con HTML, CSS (SASS) y Jquery

Código:

Codigo en Github: https://github.com/falconmasters/Seccion-Desplegable-con-Jquery

metaviewport:

Estructura HTML:

Nota!: No te olvides de enlazar antes de la etiqueta </body> el script en el que trabajaremos con el section.

Código SASS:

Si quieres aprender SASS aquí tienes un curso genial: http://www.falconmasters.com/cursos/curso-basico-de-sass/

Código CSS:

Código Jquery:

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Adrian

    Hola, me encantan tus tutos. Ya se que tus videos solo van de tutoriales y cursos cosa que se agradece mil. Pero algún dia estaría bien que hagas un “50 cosas sobre mi” mas que nada para saber donde estudiaste porque sabes un chingo de cosas jajajaj solo eso, Gracias!

  • Brian Alvarez

    Que genial esto queria hacer hace poco pero no me salio XD Muchas gracias

  • silvio

    http://www.europarc-deutschland.de/marktplatz-natur/ como hacer ese efecto

    en este caso al darle click a la imagen muestra el contenido de abajo

  • Alvaro

    quise aplicarlo en un proyecto de pruebas y no logro hacer que al presionar el boton “abrir” se despliegue el contenido a pesar de que incluso en archivos separados copie todo tu codigo y aun asi no logro hacer que funcione el script .

    • El archivo jquery te cargo correctamente? recuerda que tienes que cambiar la ruta del archivo para que concuerde con la tuya.

  • Ruben

    Una pregunta si quiero que por defecto al iniciar mi index, me aparesca desplegado en que parte modificaria?

  • Walter

    Hola Muy Bueno El Tutorial Falcon

  • Cecilia Hidalgo

    hola, como hago para que el efecto me salga de derecha a izquierda?Gracias

  • Facundo Vildoza

    Hola! Primero muchas gracias por tus videos! son de gran ayuda. Tengo un problema. Consegui que me abriera el slide…Pero al apretar “abrir” la pagina se va para arriba de todo y no se queda en la parte en la que me encuentro…podrias decirme cual puede ser el problema? Muchas Gracias!

    • Felix Manuel Martinez Sosa

      No se si aun necesites la respuesta, en caso de que si solo tienes que modificar esto en tu codigo jQuery
      $(document).ready(function(){
      var estado = false;

      $(‘#btn-toggle’).on(‘click’,function(event){
      event.preventDefault(); //esto previene que se ejecute el evento de la etiqueta a
      $(‘.seccionToggle’).slideToggle();

      if (estado == true) {
      $(this).text(“Abrir”);
      $(‘body’).css({
      “overflow”: “auto”
      });
      estado = false;
      } else {
      $(this).text(“Cerrar”);
      $(‘body’).css({
      “overflow”: “hidden”
      });
      estado = true;
      }
      });
      });

  • Javier Mártin Ayllón Alvarez

    El sitio ahora ha cambiado, puedes hacer un tutorial de como hacer ese efecto que esta ahora?

  • Ana Touriño Sánchez

    Genial el tutorial!
    Todo funciona a las mil maravillas pero en la versión móvil no funciona el scroll y se queda la sección y no puedes seguir viendo la página. Cómo se podría solucionar este problema?

    Millones de gracias

  • oscarinside

    Se puede implementar en WordPress?

  • licito

    Gracias exelente aporte

  • Gabriel Dising

    FalconMasters, Eres !Exelente!.

  • samuel villegas

    Excelente vídeo, ¿Cómo puedo hacer para que el movimiento sea lateral? es decir, de derecha a izquierda


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso