Twitter bootstrap 3.0 icon change on collapse

Question

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

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):