How do I change a glyphicon upon clicking it in Bootstrap 3.2?

Question

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 s

Answer 1

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

Answer 2

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: 8px 7px;
    }

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

Answer 3

Just use:

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

Fiddle Example