Creando un acordeon con jQuery UI

jQuery UI trae diversas funcionalidades interesantes para poder mostrar el contenido de diferentes formas. En este caso, vamos a crear un acordeon con JQuery UI, en el cual se mostrarán diversas pestañas a las cuales se puede acceder. Para realizar esto, debemos instalar jQuery UI

Una vez que tengan jQuery UI listo para su uso, vamos a dirigirnos a la página relacionada a los “demos” de jQuery UI para poder ver cómo el acordeón una vez que esté terminado. Siempre es recomendable realizar esta acción pues las funcionalidades que vamos a utilizar ya se encuentran creadas y aplicadas a páginas reales y basta únicamente con reutilizarlas. Primero, debemos dirigirnos a la página donde se encuentran los demos de jQuery UI y hacer click en la opción “Accordion” la cual hace referencia al widget del acordeón. Luego a mano derecha, vamos a ver diferentes variedades de esta funcionalidad como por ejemplo “Sortable” (para poder mover y ordenar las pestañas del acordeón), “Collapsable”, entre otras. Vamos a dejar seleccionada la opción por defecto ya que resulta la más sencilla de implementar. En caso queramos utilizar alguna de las otras opciones, basta con hacerle click para poder acceder a ella:

Ahora que ya sabemos exactamente lo que queremos lograr, vamos a irnos a nuestra instalación de jQuery UI. Vamos a irnos a la siguiente ruta:

development-bundle/demos/accordion

y vamos a copiar el archivo “default.html” a la carpeta raíz de nuestra instalación de jQuery UI.

Una vez copiado el archivo, podemos renombrarlo si queremos y lo abriremos con un editor de texto cualquiera. Veremos que el código ya se encuentra realizado así también como el contenido de muestra. Lo único que debemos realizar es arreglar los vínculos de las hojas de estilos y scripts (pues se encuentran “rotos” debido a que movimos el archivo”) y cambiar el contenido si queremos. Vamos a arreglar los vínculos para que queden de la siguiente forma:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<link rel="stylesheet" href="/jquery_ui/development-bundle/themes/base/jquery.ui.all.css"> <script src="/jquery_ui/development-bundle/jquery-1.12.2.js"></script> <script src="/jquery_ui/development-bundle/ui/jquery.ui.core.js"></script> <script src="/jquery_ui/development-bundle/ui/jquery.ui.widget.js"></script> <script src="/jquery_ui/development-bundle/ui/jquery.ui.mouse.js"></script> <script src="/jquery_ui/development-bundle/ui/jquery.ui.sortable.js"></script> <script src="/jquery_ui/development-bundle/ui/jquery.ui.accordion.js"></script> <link rel="stylesheet" href="/jquery_ui/development-bundle/demos/demos.css"> <script> $(function() { $( "#accordion" ) .accordion({ header: "> div > h3" }) .sortable({ axis: "y", handle: "h3", stop: function( event, ui ) { // IE doesn't register the blur when sorting // so trigger focusout handlers to remove .ui-state-focus ui.item.children( "h3" ).triggerHandler( "focusout" ); } }); }); </script>

Ahora que ya tenemos los vínculos arreglados, lo único que debemos hacer es agregar o cambiar el contenido. En esta sección se muestran los títulos de las pestañas del acordeón, por lo que si queremos agregar una nueva, basta con agregar un elemento adicional a aquella lista con el nuevo título y ponerle un identificador apropiado:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<div id="accordion"> <div class="group"> <h3>Section 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> </div> </div> <div class="group"> <h3>Section 2</h3> <div> <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> </div> <div class="group"> <h3>Section 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <div class="group"> <h3>Section 4</h3> <div> <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> </div>

Además, debemos agregar un nuevo <div> para el contenido que aparecerá luego de agregar dicha pestaña. Aquello lo debemos realizar en la siguiente sección que también vimos en la imagen anterior.

Debemos notar que los “id” se encuentran vinculados entre título y contenido, por lo que si creamos un nuevo título con un id específico, debemos asegurarnos de que el mismo id se encuentre en la sección de contenido. En este caso, he puesto contenido relacionado al departamento de Arequipa – Perú tal como se muestra en la siguiente imagen: