title: Bootstrap: How to collapse heading panel (link on minus)
body: <p>I am using Twitter Bootstrap collapsing panels which are by default collapsed. </p>
  
  <p>When I click on + icon or somwhere on header title I <strong>can open</strong> that panel and see content in it, but when panel is opened <strong>the minus sign</strong> for collapsing panel is not linkable (header title is).</p>
  
  <p>So, I want to make that minus icon is linkable (under HTML code is css part and you can find minus icon on content: "\f273"; in class .panel-collapse .panel-heading:after )</p>
  
  <p><strong>Update</strong></p>
  
  <p>There is online example:
  link is <a href="http://byrushan.com/projects/ma/1-6-1/jquery/light/components.html" rel="nofollow">http://byrushan.com/projects/ma/1-6-1/jquery/light/components.html</a>
  and go down to the <strong>Collapse->Accordion</strong></p>
  
  <p>(When you are expanding panel its find, but on collapsing - (minus) is not linkable)</p>
  
  <p>There is my code</p>
  
  <pre><code>&lt;div class="panel-group" data-collapse-color="red" id="faq" role="tablist" aria-multiselectable="true"&gt;
  
            &lt;div class="panel panel-collapse"&gt;
                &lt;div class="panel-heading" role="tab"&gt;
                    &lt;h4 class="panel-title"&gt;
                        &lt;a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#faq1" aria-expanded="false"&gt;
                            Panel 1
                        &lt;/a&gt;
                    &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id="faq1" class="collapse" role="tabpanel"&gt;
                  &lt;div class="panel-body"&gt;
                    Text in panel
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            ... (more DIV-s with panels)
        &lt;/div&gt;
  </code></pre>
  
  <p>Here is related CSS files</p>
  
  <pre><code>.panel-collapse .panel-heading {
    position: relative;
  }
  .panel-collapse .panel-heading .panel-title &gt; a {
    padding: 8px 5px 16px 30px;
    color: #000;
    position: relative;
  }
  .panel-collapse .panel-heading .panel-title &gt; a:after,
  .panel-collapse .panel-heading .panel-title &gt; 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 &gt; 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 &gt; 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 &gt; 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;
  }
  </code></pre>
  
  <p>Thank you!</p>