Twitter bootstrap 3.0 icon change on collapse

Question

This is about Bootstrap 3.0. I would like the icon/glyphicon to change on collapse. I.e, from a closed folder to an open one.

I have searched far and wide, and have

Answer 1

You could also use a class as target instead of an id.

 <a data-toggle="collapse" href=".details">
     <div class="details collapse in">Show details</div> 
     <div class="details collapse">Hide details</div> 
 </a>
 <div class="details collapse">
 ...
 </div>

Answer 2

Here is my solution:

$('.navbar-toggle').on('click', function() {
    $(this).toggleClass('mobile-close');
})

Hide default icon bars:

.mobile-close span {
  display: none !important;
}

Then you can style mobile-close something like:

.navbar-toggle.mobile-close {    
  cursor: pointer;
  width: 42px;
  height: 32px;
  line-height: 40px;
}
.navbar-toggle.mobile-close:before {
  content: "×";
  font-size: 40px;
  color: #231f20;
 }

Answer 3

This is a CSS-based solution that relies on the default bootstrap.js collapse implementation. No additional HTML markup required (feel free to replace Font-Awesome with glyphicons, of course).

<style>
    .panel-title > a:before {
        font-family: FontAwesome;
        content: "\f07c";
        padding-right: 5px;
    }
    .panel-title > a.collapsed:before {
        content: "\f07b";
    }
</style>

DEMO (Bootstrap 3.3.7):

DEMO (Bootstrap 4.0 / Font Awesome 5 CSS):

Answer 4

For bootstrap collapse plus and minus sign button.

HTML

<div>
  <a data-toggle="collapse" href="#other">
    <h3>Others<span class="pull-right glyphicon glyphicon-plus"></span></h3>
  </a>
  <div id="other" class="collapse">
    <h1>Others are</h1>
  </div>
</div>

Javascript

$(document).ready(function () {
     $('.collapse')
         .on('shown.bs.collapse', function() {
             $(this)
                 .parent()
                 .find(".glyphicon-plus")
                 .removeClass("glyphicon-plus")
                 .addClass("glyphicon-minus");
             })
         .on('hidden.bs.collapse', function() {
             $(this)
                 .parent()
                 .find(".glyphicon-minus")
                 .removeClass("glyphicon-minus")
                 .addClass("glyphicon-plus");
             });
         });