css - Bootstrap: How to collapse heading panel (link on minus) -

i using twitter bootstrap collapsing panels default collapsed.

when click on + icon or somwhere on header title can open panel , see content in it, when panel opened the minus sign collapsing panel not linkable (header title is).

so, want make minus icon linkable (under html code css part , can find minus icon on content: "\f273"; in class .panel-collapse .panel-heading:after )

update

there online example: link http://byrushan.com/projects/ma/1-6-1/jquery/light/components.html , go down collapse->accordion

(when expanding panel find, on collapsing - (minus) not linkable)

there code

<div class="panel-group" data-collapse-color="red" id="faq" role="tablist" aria-multiselectable="true">            <div class="panel panel-collapse">               <div class="panel-heading" role="tab">                   <h4 class="panel-title">                       <a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#faq1" aria-expanded="false">                           panel 1                       </a>                   </h4>               </div>               <div id="faq1" class="collapse" role="tabpanel">                 <div class="panel-body">                   text in panel                 </div>             </div>           </div>           ... (more div-s panels)       </div> 

here related css files

.panel-collapse .panel-heading {   position: relative; } .panel-collapse .panel-heading .panel-title > {   padding: 8px 5px 16px 30px;   color: #000;   position: relative; } .panel-collapse .panel-heading .panel-title > a:after, .panel-collapse .panel-heading .panel-title > a:before {   position: absolute;   bottom: 0;   left: 0;   height: 2px;   width: 100%;   content: "";   -webkit-transition: all;   -o-transition: all;   transition: all;   -webkit-transition-duration: 300ms;   transition-duration: 300ms;   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   backface-visibility: hidden; } .panel-collapse .panel-heading .panel-title > a:after {   -webkit-transform: scale(0);   -ms-transform: scale(0);   -o-transform: scale(0);   transform: scale(0); } .panel-collapse .panel-heading:not(.active) .panel-title > a:before {   background: #eee; } .panel-collapse .panel-heading:before, .panel-collapse .panel-heading:after {   font-family: 'material-design-iconic-font';   font-size: 17px;   position: absolute;   left: 0;   -webkit-transition: all;   -o-transition: all;   transition: all;   -webkit-transition-duration: 300ms;   transition-duration: 300ms;   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   backface-visibility: hidden;   top: 4px; } .panel-collapse .panel-heading:before {   content: "\f278";   -webkit-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1); } .panel-collapse .panel-heading:after {   -webkit-transform: scale(0);   -ms-transform: scale(0);   -o-transform: scale(0);   transform: scale(0);   content: "\f273"; } .panel-collapse .panel-heading.active .panel-title > a:after {   -webkit-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1); } .panel-collapse .panel-heading.active:before {   -webkit-transform: scale(0) rotate(-90deg);   -ms-transform: scale(0) rotate(-90deg);   -o-transform: scale(0) rotate(-90deg);   transform: scale(0) rotate(-90deg); } .panel-collapse .panel-heading.active:after {   -webkit-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1); } .panel-collapse .panel-body {   border-top: 0 !important;   padding-left: 5px;   padding-right: 5px; } 

thank you!

because there no answer, add workaround

.panel-collapse > .panel-heading > .panel-title > {   z-index: 1; } 

basically make <a> tag on minus sign , <a> clickable