<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"> <div class="col-md-6 col-md-offset-3"> <!-- Nav tabs category --> <ul class="nav nav-tabs faq-cat-tabs" id="mytab"> <li class="active"><a href="#faq-cat-1" data-toggle="tab">saeed</a></li> <li><a href="#faq-cat-2" data-toggle="tab">soheyl</a></li> </ul> <!-- 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"> maharataye saeed <span class="pull-right"><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"> matne maharataye saeed </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"> ertebat ba saeed <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"> matne ertebat ba saeed </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"> maharataye soheyl <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"> matne maharataye soheyl </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"> ertebat ba soheyl <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"> matne ertebat ba soheyl </div> </div> </div> </div> </div> </div> </div> </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() { $('.collapse').on('show.bs.collapse', function() { var id = $(this).attr('id'); $('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>'); }); });