You are here
Acordeón con Twitter Bootstrap Sin categoría 

Acordeón con Twitter Bootstrap

Con la clase “Collapse” que trae Bootstrap dentro de sus “JavaScript Plugins”, podemos realizar sin mayores complicaciones este ejercicio, sin embargoquería agregarle algo más que le diera un poco más de presencia visual, agregarle un control de estado (abierto – cerrado) y que este se mostrara con un más (+) y un menos (-) según corresponda.

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 quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts

Comments

Leave a Comment


*