How Do I Change A Glyphicon Upon Clicking It In Bootstrap 3.2?

I want to have an arrow pointing to the right to allow the user to expand the sidebar, and then change that glyphicon to point to the left. That way, it points to the left so that

Solution 1:

Just use:

$('#menu-toggle').click(function(){
    $(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left');
});

Fiddle Example

Solution 2:

Try

$('#menu-toggle').on('click', function(){
    var iSelector = $(this).find('i:first');
    if(iSelector.hasClass('glyphicon-arrow-right')) {
        iSelector.removeClass('glyphicon-arrow-right')
        iSelector.addClass('glyphicon-arrow-left')
    }
});

Fiddle

Reference:

• selectors
• on
• hasClass
• removeClass
• addClass

Solution 3:

I guess there is a better way to address this common problem is using CSS's pseudo classes like

:after

For example

.panel-heading.accordion-toggle:after {    
        font-family: 'Glyphicons Halflings';
        content: "\e114";
        float: right;
        color: grey;
        transition: transform 0.5s;
        transform-origin: 8px7px;
    }

And below code for rotating glyphicon

.panel-heading.accordion-toggle.collapsed:after {
    transform: rotateZ(180deg);
}

Please note: font-family and content may be different if you are using other than bootstrap css library. Also pay attention to the classes decorated or used for your panel.

Reference