[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.


<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.

 


Leave a comment

One thought on “[Bootstrap 3] Crear un Accordion o Acordeon