Exchange CSS classes with simple Jquery function

Question

I have a dropdown menu and in the corner of <li> I have an icon of the Font Awesome which symbolises an upward-facing arrow (fa fa-level-up pull-right) and when the user clicks on this <li> and open the dropdown, the arrow should turn down (fa fa-level-down pull-right), however I do not know how to put the path to Jquery find the icon, follow the Jquery code I have and HTML.

Jquery:

$(function(){
    $(".longBarVertical .menuVertical .liClassLBV .span .i").on("change.level", function() {                   
        $(this).prev().find(".fa").eq(1).removeClass("fa fa-level-down pull-right").addClass("fa fa-level-up pull-right");
    });
    $('.longBarVertical .menuVertical .liClassLBV .span .i').on("change.level", function() {                        
        $(this).prev().find(".fa").eq(1).removeClass("fa fa-level-up pull-right").addClass("fa fa-level-down pull-right");        
    });
})

HTML:

<div class="longBarVertical">
        <div class="logo">
            <a href="home.php">
                <img src="img/logoGAP.png">
            </a>
        </div>
        <ul class="menuVertical">
            <li>
                <a class="liClassLBV" href="#" data-toggle="collapse" data-target="#submenu-1">
                    <i class="fa fa-file-text-o"></i><span>Atendimento<i class="fa fa-level-up pull-right"></i></span>
                </a>
            </li>
            <div class="submenu">
                <ul id="submenu-1" class="collapse">
                    <li><a href="#"><i class="fa fa-angle-double-right"></i><span> Novo </span></a></li>
                    <li><a href="#"><i class="fa fa-angle-double-right"></i><span> Em aberto </span></a></li>
                </ul>
            </div>
       </ul>
    </div>

Answer 1

Add or remove only the class that you want to change:

removeClass("class que vai sair").addClass("class que vai entrar");

No need to repeat the others you don’t want to change.

Change your code:

$(function(){
    $(".longBarVertical .menuVertical .liClassLBV .span .i").on("change.level", function() {                   
        $(this).prev().find(".fa").eq(1).removeClass("fa fa-level-down pull-right").addClass("fa fa-level-up pull-right");
    });
    $('.longBarVertical .menuVertical .liClassLBV .span .i').on("change.level", function() {                        
        $(this).prev().find(".fa").eq(1).removeClass("fa fa-level-up pull-right").addClass("fa fa-level-down pull-right");        
    });
})

For:

$(".longBarVertical .menuVertical .liClassLBV .span .i").on("change.level", function() {                   
        $(this).prev().find(".fa").eq(1).toggleClass("fa-level-up");
});

Answer 2

I like to wear

$(this).toggleClass('fa-angle-double-down fa-angle-double-up');

for the purpose you want.

When I click the button the down arrow gives way to the up arrow and vice versa.

Example, using Bootstrap, Jquery and Font Awesome:

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<a class="btn btn-info btn-lg fa fa-angle-double-down" id="mais-sobre" href="#"></a>

Jquery:

$('#mais-sobre').on('click', function(event){
    event.preventDefault();
    $(this).toggleClass('fa-angle-double-down fa-angle-double-up');
});

Fiddle

Answer 3

Try this code:

 $('.liClassLBV').click(function(){
       $('.liClassLBV').not(this).find('span i').removeClass("fa-level-up").addClass("fa-level-down");

       $(this).find('span i').removeClass("fa-level-down").addClass("fa-level-up");

})