<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Accordion with Open / Close Arrows</h2> </div> </div> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> </div>

@import url('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'); .accordion-toggle:before { font-family: 'FontAwesome'; content: "\f078"; float: left; margin-right :1em; } .accordion-opened .accordion-toggle:before { content: "\f054"; } .accordion-heading > a { display: block; text-decoration: none; }

/** * EFECTO PARA FLECHAS EN ACORDEON */ $(document).on('show','.accordion', function (e) { $(e.target).prev('.accordion-heading').addClass('accordion-opened'); }); $(document).on('hide','.accordion', function (e) { $(this).find('.accordion-heading').not($(e.target)).removeClass('accordion-opened'); });