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 so that they understand how to hide the sidebar. I then want it to change back to its default state.

This is what I have currently:

        <div id="page-content-wrapper">
        <div class='hidden-lg'>
        <div class="content-header">
                <h1>
                <a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></a>
                </h1>
        </div>
        </div>

Answer 1

Just use:

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

Fiddle Example

Answer 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