Enlace para mostrar y ocultar contenido con jQuery

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.