17OctjQuery UI: Efecto acordeón

Para los que no lo sepáis, jQuery UI es una librería que añade widgets y efectos visuales al framework jQuery.

Uno de esos widgets es el acordeón. Al clicar en los títulos se extienden mostrando el contenido de estos.

Para realizar este efecto nos basaremos en el ejemplo de la propia web de jQuery UI dónde podréis comprobar otros efectos muy interesantes.

En primer lugar crearemos un documento html en el que añadiremos las diferentes secciones con sus correspondientes títulos y contenidos, nosotros en este ejemplo utilizaremos 3 secciones:

<div id="accordion">
 <h3><a href="#">Section 1</a></h3>
 <div>
 <p>
 Content
 </p>
 </div>
 <h3><a href="#">Section 2</a></h3>
 <div>
 <p>
 Content
 </p>
 </div>
 <h3><a href="#">Section 3</a></h3>
 <div>
 <p>
 Content
 </p>
 </div>
</div>

Hemos asignado la id “accordion” al div principal porque será el que le diremos a JQuery UI que utilice para montar el acordeón.

Para poder hacer uso de las librerías de jQuery el procedimiento es como el que utilizamos en otro post para incluir Prototype y Scriptaculous, la primera es descargarnos las librerías desde la web y llamarlas desde nuestro html y la segunda es incluirlas directamente desde la web oficial. Nosotros las incluiremos directamente desde la web oficial.

Para ello hay que añadir las siguientes líneas de código:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

La primera línea incluye el estilo visual. En este caso hemos utilizado el estilo “Redmond” pero ya veréis que en la web de jQuery UI tenéis mucha variedad y con la posibilidad de modificarlos desde la misma web con una interfaz gráfica.

Por último añadimos el script que coge el div “accordion” y llama al método accordion() que es el que monta el acordeón propiamente dicho:

<script type="text/javascript">
$(function() {
$("#accordion").accordion();
});
</script>

Y este es un ejemplo del resultado final: