jquery - 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?

question from:https://stackoverflow.com/questions/18147338/twitter-bootstrap-3-0-icon-change-on-collapse

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