Acordeón con cambio de estado con Bootstrap

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

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

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
32
33
34
35
36
37
<head>
    <meta charset="utf-8" />
    <title>Ejemplo acordeon</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part I.
</a></div>
<div class="accordion-body collapse" id="collapseOne" style="height: 0px;">
<div class="accordion-inner">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.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part II.
</a></div>
<div class="accordion-body collapse" id="collapseTwo">
<div class="accordion-inner">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.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part III.
</a></div>
<div class="accordion-body collapse" id="collapseThree">
<div class="accordion-inner">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.</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</body>

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.

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
32
33
34
35
36
37
38
39
40
41
<head>
    <meta charset="utf-8" />
    <title>Ejemplo acordeon</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>

<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part I.
</a></div>
<div class="accordion-body collapse" id="collapseOne" style="height: 0px;">
<div class="accordion-inner">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.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part II.
</a></div>
<div class="accordion-body collapse" id="collapseTwo">
<div class="accordion-inner">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.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part III.
</a></div>
<div class="accordion-body collapse" id="collapseThree">
<div class="accordion-inner">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.</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>

<!-- Ficheros JS necesarios para que funcione-->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>

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

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
/*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;}

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.

1
<link href="css/acordeon.css" rel="stylesheet" type="text/css" />

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í:

1
2
3
4
5
6
7
8
9
10
11
12
13
    <script>
    $(function() {

    $('.accordion').on('show', function (e) {
         $(e.target).prev('.accordion-heading').addClass('accordion-opened');
    });
   
    $('.accordion').on('hide', function (e) {
        $(this).find('.accordion-heading').not($(e.target)).removeClass('accordion-opened');
    });
       
});
    </script>

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

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<head>
    <meta charset="utf-8" />
    <title>Ejemplo acordeon</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/acordeon.css" rel="stylesheet" type="text/css" />

</head>

<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part I.
</a></div>
<div class="accordion-body collapse" id="collapseOne" style="height: 0px;">
<div class="accordion-inner">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.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part II.
</a></div>
<div class="accordion-body collapse" id="collapseTwo">
<div class="accordion-inner">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.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">
Click me to expand. Click me again to collapse. Part III.
</a></div>
<div class="accordion-body collapse" id="collapseThree">
<div class="accordion-inner">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.</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>

<!-- Ficheros JS necesarios para que funcione-->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script>
    $(function() {

    $('.accordion').on('show', function (e) {
         $(e.target).prev('.accordion-heading').addClass('accordion-opened');
    });
   
    $('.accordion').on('hide', function (e) {
        $(this).find('.accordion-heading').not($(e.target)).removeClass('accordion-opened');
    });
       
});
    </script>

</body>

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.

Licenciado en Diseño Gráfico y Publicidad por la Universidad de Buenos Aires. Lleva vinculado más de 19 años al mundo de la publicidad, el marketing y la tecnología, trabajando para agencias de Argentina, Estados Unidos y España. Dirigió 8 años el Departamento Creativo de Servilia. Ha participado como ponente o formador en innumerables eventos de divulgación sobre los beneficios de las redes sociales, el desarrollo web y el marketing. Organizador y ponente de la Primera Semana de las Redes Sociales de Castilla y León Docente de marketing online, personal branding y posicionamiento de la Escuela de Negocios de la Cámara de Comercio de Valladolid Manager de la ciudad de Valladolid de la Asociación de Desarrolladores Web de España y especialista en Usabilidad Web y técnicas de posicionamiento Blogger por catarsis y proyecto permanente de fotógrafo

Comentarios arrow 4 Comentarios
  1. Gracias Emiliano. Podrías adaptarlo para que funcione en Bootstrap 3?

  2. ¡Me ha servido de muchísima ayuda, gracias! ^^

  3. Muy buen trabajo enhorabuena, sin embargo yo tengo un problema con mi acordeon.
    como hago para que al abrir uno de los items el que esta abierto se cierre??
    por ejemplo esta abierto el primero y quiero q al abrir el segundo el primero se cierre automaticamente
    gracias!!!

  4. Hola Emiliano,
    Esta muy bueno el acordeon, pero lo necesito todo expandido inicialmente, me podrías ayudar!!

    Gracias y saludos.

Escribe un comentario

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.