Geek Answers Handbook

How to change a glyphicon by clicking it in Bootstrap 3.2?

I want the arrow to point to the right, to allow the user to expand the sidebar, and then change this glyphicon to the left. So he points to the left to figure out how to hide the sidebar. Then I want it to change its default state.

This is what I have:

        <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>
+4
source share
2 answers

Just use:

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

Script example

+19
source

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

Link:

+1
source

More articles:


All Articles