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 read threads here on SO, but to no avail. This thread was close, and is basically what I want. How can I make it work in Bootstrap 3?

Answer 1

The collapse events are handled differently in Bootstrap 3. Now it would be something like:

$('#collapseDiv').on('shown.bs.collapse', function () {    $(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open"); });  $('#collapseDiv').on('hidden.bs.collapse', function () {    $(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close"); }); 

Demo: http://www.bootply.com/73101

Answer 2

This code finds your accordion with the ID of 'Accordion'. When the shown event fires on the collapsed panel, the icon is found in the header panel (the previous element) and it finds and changes your glyph icon element within that HTML code block:

$('#accordion .panel-collapse').on('shown.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});

//The reverse of the above on hidden event:

$('#accordion .panel-collapse').on('hidden.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});

Answer 3

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");
             });
         });

Answer 4

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 5

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 6

Using only CSS, the bootstrap collapse icon can be changed with your predefined icons:

a[aria-expanded=true] .glyphicon-plus {
    display: none;
}
a[aria-expanded=false] .glyphicon-minus {
    display: none;
}
.pointer{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" >
  <span class="pull-left title-sidebar">Filter By Price</span>
  <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
  <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span>
  <div class="clearfix"></div>
</a>
<div id="testCollpase" class="collapse">
  <ul>
    <li><a href="#">500$</a></li>
    <li><a href="#">1000$</a></li>
  </ul>
</div>

In your HTML add aria-expanded="false" and add two icons what you need to set in your collapse bar. Like,

<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" >
  <span class="pull-left title-sidebar">Filter By Price</span>
  <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
  <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span>
</a>

And control it from css. When collapse bar expand then

a[aria-expanded=true] .glyphicon-plus {
    display: none;
}

otherwise it will be

a[aria-expanded=false] .glyphicon-minus {
    display: none;
}

Run the snippet and I think you just need this...

Answer 7

The collapse events are handled as:

$('#collapse').on('shown.bs.collapse', function () {
   $(".glyphicon")
      .removeClass("glyphicon-folder-close")
      .addClass("glyphicon-folder-open");
 });

 $('#collapse').on('hidden.bs.collapse', function () {
    $(".glyphicon")
       .removeClass("glyphicon-folder-open")
       .addClass("glyphicon-folder-close");
 });