[Bootstrap 3] Crear un Accordion o Acordeon
Un acordeon o accordion en Bootstrap 3 es un componente uqe sirve para agrupar datos de una manera interactiva ya que el usuario puede desplegar las opciones.
En la imagen de arriba les muestro al accordion y a continuacion les dejo el codigo solo para el accordion.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> | |
| <div class="panel panel-success"> | |
| <div class="panel-heading" role="tab" id="headingOne"> | |
| <h4 class="panel-title"> | |
| <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> | |
| Opcion #1 | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> | |
| <div class="panel-body"> | |
| <h3>Opcion 1</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading" role="tab" id="headingTwo"> | |
| <h4 class="panel-title"> | |
| <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> | |
| Opcion #2 | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> | |
| <div class="panel-body"> | |
| <h3>Opcion 2</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-danger"> | |
| <div class="panel-heading" role="tab" id="headingThree"> | |
| <h4 class="panel-title"> | |
| <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> | |
| Opcion #3 | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> | |
| <div class="panel-body"> | |
| <h3>Opcion 3</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Este codigo lo deben colocar dentro de un elemento “<div class=col-md-12></div>” o el equivalente donde quieran que se muestre el accordion.
Como pueden ver el codigo es muy facil y es necesario incluir la libreria jquery para que el componente funcione.
Descargar
A continuacion les dejo el link de descarga para el ejemplo completo.
Link: http://bitigee.com/11227357/bs3-accordion
Suscribirse
No olviden comparir con sus amigos y se pueden suscribir al blog para recibir correos cada vez que se publiquen nuevos articulos.
Muy buen aporte! sigue asi!