Acordeón con cambio de estado con Bootstrap

A lo mejor, dado que estamos en el blog que estamos, no haga falta explicar que es Boostrap. Pero como nunca está de más un poco de conocimiento adicional; repasemos.

Bootstrap es un Framework de desarrollo para front-end creado por Mark Otto y Jacbod Thornton y la demás gente de Twitter. Particularmente, yo lo veo como una evolución y perfeccionamiento de los otros frameworks similares que ya existían. (960gs, Yaml, Blueprint y tantos otros). Todos tienen sus cosas buenas y malas. Es una cuestión más de gustos y cierta flexibilidad a la hora de manejarse «en los extremos» de lo que te permite cada framework.


Me gusta Bootstrap porque ya está muy orientado a HTML5 y CSS3 con los adicionales para funcionar muy bien en todos los dispositivos (Responsive Web Design).

Hace muy poco me tocó desarrollar un acordeón horizontal con la clase «Collapse» que trae Bootstrap dentro de sus «JavaScript Plugins», pero quería agregarle algo más que le diera un poco más de presencia visual. Entonces, se me ocurrió que una buena manera sería agregarle un control de estado (abierto – cerrado) y que este se mostrara con un más (+) y un menos (-) según corresponda.

Este es el resultado final: Acordeón con Bootstrap.

Así que ahora vamos al paso a paso para crearlo:

HTML

El HTML es exactamente el mismo que puedes bajar del modelo que ofrece Bootstrap

[cc]



Ejemplo acordeon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


[/cc]

Como podemos ver, aún no contamos con las funcionalidades que otorga el JavaScript y que permiten funcionar al acordeón, así que ahora, al mismo HTML le agregaremos los script de JS necesarios para que funcione.

[cc]



Ejemplo acordeon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




[/cc]

Si lo dejamos así, funcionaría igual que el que está de ejemplo en la página de Bootstrap. Pero como queremos darle un toque más personal, vamos a ponernos creativos 🙂

Un consejo: Te recomiendo realizar todas las modificaciones del código CSS que trae Boostrap en un fichero separado y no tocar el original. De esta forma, si el día de mañana sale una actualización (van por la versión 2.0.2), podrás reemplazar el fichero directamente sin miedo a perder ninguna modificación personal.

CSS

[cc]
/*Acordeon con cambio de estado con base de Bootstrap */

.accordion-group .accordion-heading:after {
background: #E79925;
}

.accordion-group {
background: #f8e0bd;

}

.accordion{margin-bottom:20px;}
.accordion-group{margin-bottom:2px;border:1px solid #e5e5e5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; width:500px;}
.accordion-heading{border-bottom:0;}
.accordion-heading .accordion-toggle{display:block;padding:8px 15px;}
.accordion-toggle{cursor:pointer;}
.accordion-inner{padding:9px 15px;border-top:1px solid #e5e5e5;}

.accordion-body{-webkit-transition:»height .4s linear»;-moz-transition:»height .4s linear»;-o-transition:»height .4s linear»;transition:»height .4s linear»;}
.accordion-group{border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin-bottom:5px;}
.accordion-group .accordion-heading{position:relative;}

/*Control del cambio de estado */
.accordion-group .accordion-heading:after{pointer-events:none;color:#fff;content:»+»;font-size:15px;padding:8px 13px;position:absolute;top:0;right:0;bottom:auto auto;left:auto;}
.accordion-group .accordion-heading.accordion-opened:after{content:»-«;padding:8px 15px;}

.accordion-group a{color:#231f20;}
.accordion-group a:hover{text-decoration:none;}
.accordion-group .accordion-inner{border:none;padding:20px;}

[/cc]

Este documento lo puedes llamar como quieras. Por ejemplo «acordeon.css»; pero recuerda vincularlo en el «head» de tu HTML debajo de la línea del bootstrap.css.
[cc] [/cc]

JavaScript

Peeero, como la vida no es perfecta. Necesitamos una cosa más. Una función de JavaScript que nos agregue y nos quite las clases de los cambios de estado, dependiendo de si el módulo del acordeón está abierto o cerrado.

La función de JS sería más o menos así:

[cc]

[/cc]

Por lo que nuestro HTML terminado sería así:

[cc]



Ejemplo acordeon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





[/cc]

Y eso es todo amigos. Si queréis ahorraros tiempo, podéis descargar todos los ficheros del modelo terminado desde aquí. Aunque ya sabéis que la mejor manera de aprender es romperse (un poquito) la cabeza contra la pantalla hasta hacer funcionar las cosas.
Todas las aportaciones que se os acurran para agregarle alguna funcionalidad extra, o mejoras a este, son bienvenidas.

WordPress › Error

Ha habido un error crítico en esta web.

Aprende más sobre el diagnóstico de WordPress.