rb612 rb612 - 22 days ago 6
CSS Question

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

Just use:

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

Fiddle Example

Comments