comparte el articulo 

Enlace para mostrar y ocultar contenido con jQuery

Actualizado el 05/10/2013 < > 6 Cometarios

Resumen: Explicamos como llevar a cabo la creación de una función simple que nos ayude a mostrar y ocultar contenido de un elemento

En muchas ocasiones, las tareas que en contexto lucen sencillas de desarrollar, pueden llegar a representar una amplia mejora a la usabilidad de un sitio web. Dentro de esta clase de funcionalidades, podemos encontrar los enlaces para mostrar más o menos contenido dentro de una página.

Esta funcionalidad, la podemos observar en muchísimos sitios a lo largo y ancho del Internet, ya que representa una de las maneras más sencillas de ahorrar espacio visual y a la vez ofrecer información suficiente para que el usuario no termine confundido o desorientado al observar el contenido.

Gracias al uso de jQuery, el añadir un link que lleve a cabo esta tarea puede resultar bastante sencillo. El objetivo, es lograr que el usuario pueda expandir y contraer una sección entera de contenido con tan sólo dar clic sobre el enlace que mostramos.

Crear la estructura HTML

El primer paso del proceso, consiste en crear una estructura, dentro de la cual añadiremos los elementos HTML necesarios para desplegar la información que deseamos. En este caso, nuestra estructura será bastante sencilla, ya que únicamente ejemplificaremos datos de prueba.

Vamos a crear tres elementos de tipo bloque, el primero de ellos contendrá la información que se podrá observar por defecto, el segundo por su parte contendrá la información que estará oculta, mientras que el tercero lo utilizaremos para que actúe como enlace. La razón por la que usamos un div en vez de un elemento de anclaje, es para evitar el comportamiento default de este último, en caso de querer usar un elemento anchor para la operación, entonces debes recordar de utilizar la sentencia event.preventDefault().

En base a lo dicho, nuestra estructura final quedaría de la siguiente manera:

<div>LaWebera.es, sitio dedicado al diseño y desarrollo de páginas web.</div>
<div class="infoExtra">En estas páginas encontrarás cantidad de información para aprender a hacer tus páginas web, además de amplios servicios de diseño web profesional para empresas y particulares. Diseños web adaptados a cada cliente, optimizados para el SEO, autogestionables y con las técnicas CSS y XHTML más actuales.</div>
<div class="leerMas">Leer más</div>

Dar estilo

Después de tener nuestra estructura, pasamos a darle el estilo necesario para que luzca correctamente. Lo más importante en este paso, es ocultar el div que contiene la información extra, para ello debemos hacer uso de la propiedad “display” con su valor asignado a “none”.

div {
  margin:10px;
}
div.infoExtra {
  display:none;
}
.leerMas { color:blue; cursor:pointer; display:inline;}
.leerMas:hover {color:purple; text-decoration:underline;}

Agregar jQuery

Como ya dijimos, en este proyecto haremos uso de jQuery para llevar a cabo el proceso de manera más sencilla y hacer que nuestro código luzca mucho más limpio.

Para poder hacer uso de la funcionalidad proporcionada por jQuery, es necesario agregarlo dentro de nuestro código. Este paso, es bastante sencillo de realizar, basta con agregar el llamado a la librería dentro de la etiqueta head de nuestro código, esto se lograr utilizando un elemento de tipo script cuyo atributo src apunte a la locación donde se encuentra la librería.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Construir la función con jQuery

El último paso, consiste en elaborar una función que nos permita llevar a cabo la operación de mostrar y ocultar el elemento que contiene la información complementaria para el usuario. Para ello, vamos a recurrir a la función “slideToggle()”, la cual se encuentra definida en el core del framework jQuery.

Esta función se encarga de agregar un efecto de “acordeón” a nuestros elementos, es decir cuando el contenido del elemento esta contraído se encarga de expandirlo y cuando este ya se encuentra expandido lo regresa a su estado original. La diferencia entre esta función y “toogle()”, es que la primera mostrará u ocultará la información agregando un efecto de deslizamiento, mientras que “toggle” no agrega ninguna clase de efecto a la transición.

Para poder realizar la llamada a dicha función, haremos uso del evento clic, el cual también podemos capturar con jQuery. Para esto debemos agregar un selector, el cual se encargará de definir que elementos recibirán el evento de clic, y una vez que se lleve la acción, mandar llamar la funcionalidad para mostrar u ocultar lo que deseamos.

En nuestro caso, el elemento que recibirá el evento clic será el div cuya clase es “leerMas”, por lo que la sentencia lucirá de la siguiente manera:

jQuery(function () {
  jQuery(".leerMas").bind("click", function () { });
});

Lo que resta por agregar es el llamado a la función “slideToggle”, esta función se deberá aplicar al elemento cuya clase es “infoExtra”, ya que este es el que contiene la información complementaria. Para poder seleccionar dicho elemento, podemos utilizar un selector o si decimos utilizar el elemento que ya recibió el evento de clic, podemos llamar a la función “prev()” de jQuery la cual se encargará de seleccionar al elemento previo a este, el cual según nuestra estructura es “infoExtra”.

jQuery(function () {
  jQuery(".leerMas").bind("click", function () {
    jQuery(this).text(jQuery(this).text() == "Leer más" ? "Ocultar" : "Leer más");
    jQuery(this).prev().slideToggle();
  });
});

Como toque final, también agregamos una funcionalidad para que el texto del enlace cambiará, dependiendo del estado en que se encuentra el div oculto.

Publicado el 15/01/2013, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

6 Cometarios

  1. jiuck

    Hay algunos trozos de código que no se ven bien. Sería posible que publicarais el código del ejemplo todo seguido? Es la mejor manera de comprobar lo que estáis explicando. Gracias!

    Martes, 15 de enero 2013

  2. Daniel Ernesto Navarro Herrera

    Listo he arreglado el problema, gracias por avisarnos.

    Saludos

    Martes, 15 de enero 2013

  3. Rafa Pozo

    Hola,
    queda muy bien a pesar de ser una cosa sencilla y basica…. pero supongamos que yo tengo el articulo en otra pagina diferente, donde tengo el articulo completo (foto y texto).
    Cómo podría colocar esa misma foto y un extracto del texto (finalizando con … y leer mas) en la pagina principal (sin tener que escribirlo dos veces: una en su pagina de articulo, y otra en la principal) y al pinchar el enlace me lleve a esa pagina del articulo completo ??
    gracias

    Domingo, 27 de enero 2013

  4. pedro

    mi pana necesito un favor como ago para que desde un boton se despliegue una div que contiene unas cajas de texto y en el mismo boton se vuelva a contraer el div

    Miércoles, 13 de marzo 2013

  5. Daniel Ernesto Navarro Herrera

    Es practicamente lo mismo que se hizo aquí, solo en lugar de utilizar un texto como portador del evento utilizarías un botón, así cuando le den clic al botón el div será desplegado o contraído.

    Miércoles, 13 de marzo 2013

  6. Paul

    Buenas,

    en dispositivo móvil no funciona no? lo he probado en android e iphone pero se abre y se vuelve a cerrar, no sé si os ocurre lo mismo.

    Martes, 11 de noviembre 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras