<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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"> <!-- Nav tabs category --> <ul class="nav nav-tabs faq-cat-tabs"> <li class="active"><a href="#faq-cat-1" data-toggle="tab">Exterior</a></li> <li><a href="#faq-cat-2" data-toggle="tab">Armazém</a></li> <li><a href="#faq-cat-6" data-toggle="tab">Cozinhas</a></li> <li><a href="#faq-cat-9" data-toggle="tab">Sala Colaboradores</a></li> </ul> </div> <div class="row"> <div class="col-md-4"> <!-- Tab panes --> <div class="tab-content faq-cat-content"> <div class="tab-pane active in fade" id="faq-cat-1"> <div class="panel-group" id="accordion-cat-1"> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-1"> <h4 class="panel-title"> ER #1 <span class="pull-right"> <span style="font-weight:light; font-size:1.4em"> ⊗ ⊡ ⊠ ⊙ ⊚ </span> <!-- <button class="btn btn-xs btn-primary active" disabled>2 B </button> --> <i class="glyphicon glyphicon-plus"></i> </span> </h4> </a> </div> <div id="faq-cat-1-sub-1" class="panel-collapse collapse"> <div class="panel-body"> Olhaaaaa fresquinha ora mais mais mais </div> <div class="panel-footer">  <div class="btn-group pull-right"> <button class="btn btn-xs btn-primary active" title="VEBITOX (×1)"> P </button> <button class="btn btn-xs btn-primary active" title="RATIBROM 2 (×2)" > B </button> <button class="btn btn-xs btn-primary" disabled > C </button> </div> </div> </div> </div> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-2"> <h4 class="panel-title"> <small>ER #</small><strong style="font-size:1.2em">5</strong> <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-1-sub-2" class="panel-collapse collapse"> <div class="panel-body"> Olhaaaaa fresquinha ora mais mais mais </div> </div> </div> </div> </div> <div class="tab-pane fade" id="faq-cat-2"> <div class="panel-group" id="accordion-cat-2"> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-1"> <h4 class="panel-title"> ER #2 <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-2-sub-1" class="panel-collapse collapse"> <div class="panel-body"> Olhaaaaa fresquinha ora mais mais mais </div> </div> </div> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-2"> <h4 class="panel-title"> ER #2 <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-2-sub-2" class="panel-collapse collapse"> <div class="panel-body"> Olhaaaaa fresquinha ora mais mais mais </div> <div class="panel-footer">  <div class="btn-group pull-right"> <button class="btn btn-xs btn-primary active" title="VEBITOX (×1)" disabled> P </button> <button class="btn btn-xs btn-primary active" title="RATIBROM 2 (×3)" > B </button> <button class="btn btn-xs btn-primary" disabled > C </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="mostra"></div> </div> <!-- <div class="btn-iscos btn-group"> <button class="btn btn-xs btn-primary active" title="VEBITOX (×1)" disabled> P </button> <button class="btn btn-xs btn-primary active" title="RATIBROM 2 (×2)" > B </button> <button class="btn btn-xs btn-primary" disabled > C </button> </div> --> </div>

body { padding-top: 30px; } .faq-cat-content { margin-top: 25px; } .faq-cat-tabs li a { padding: 15px 10px 15px 10px; background-color: #ffffff; border: 1px solid #dddddd; color: #777777; } .nav-tabs li a:focus, .panel-heading a:focus { outline: none; } .panel-heading a, .panel-heading a:hover, .panel-heading a:focus { text-decoration: none; color: #777777; } .faq-cat-content .panel-heading:hover { background-color: #efefef; } .active-faq { border-left: 5px solid #888888; } .panel-faq .panel-heading .panel-title span { font-size: 13px; font-weight: normal; }

$(document).ready(function() { /*$('.btn-iscos').prop('disabled', true); var iscos = $('.btn-iscos').html();*/ $('.collapse').on('show.bs.collapse', function() { var id = $(this).attr('id'); /*iscos = $('.btn-iscos').html();*/ $('a[href="#' + id + '"]').closest('.panel-heading').addClass('active-faq'); $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-minus"></i>'); }); $('.collapse').on('hide.bs.collapse', function() { var id = $(this).attr('id'); $('a[href="#' + id + '"]').closest('.panel-heading').removeClass('active-faq'); $('a[href="#' + id + '"] .panel-title span').html( ' <i class="glyphicon glyphicon-plus"></i>'); /* $('.mostra').text(iscos);*/ }); /* $('.mostra').text(iscos);*/ });