How do I change font-awesome icon?

Question

I have a number of nav elements as shown below:

<li>
    <a href="#"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="#">Add New</a>
        </li>
        <li>
            <a href="#">View / Edit</a>
        </li>
        <li>
            <a href="#">Inactive List</a>
        </li>
    </ul>
</li>

It shows closed folder icon when I have that item both collapsed or open.

When clicked on the title to expand, I want it to change to fa-folder-open and when clicked again to close it, I want it to change to fa-folder. Since there are many such nav items, it should affect only the one that's being clicked.

Which event and on which element (in jQuery) is best to support this in all browsers?

Answer 1

I would do it like this:

$(document).ready(function() {
  $('.navbutton').click(function() {
    $(this).find('.fa-folder,.fa-folder-open').toggleClass('fa-folder').toggleClass('fa-folder-open');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<li>
    <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="#">Add New</a>
        </li>
        <li>
            <a href="#">View / Edit</a>
        </li>
        <li>
            <a href="#">Inactive List</a>
        </li>
    </ul>
</li>

---

If you want to close every folder icon when opening another menu point, you can use this code:

$(document).ready(function() {
  $('.navbutton').click(function() {
    var currentFolder = $(this).find('.fa-folder,.fa-folder-open');
    var openFolders = $(this).parents('.mainList').find('.fa-folder-open');
    var currentFolderAlreadySwitched = false;

    // it goes through all the folder icons and toggles its classes. if the currently clicked icon is also part of this list, it should only be switched once (so it is flagged as already switched)
    openFolders.each(function() {
        $(this).toggleClass('fa-folder fa-folder-open');
        if($(this).get(0) === currentFolder.get(0)) {
            currentFolderAlreadySwitched = true;
        }
    });

    // if the current folder was open, it would already be closed by the code above. therefore, it would open it right again here (so skip it)
    if(!currentFolderAlreadySwitched) {
        currentFolder.toggleClass('fa-folder fa-folder-open');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="mainList">
    <li>
        <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="#">Add New</a>
            </li>
            <li>
                <a href="#">View / Edit</a>
            </li>
            <li>
                <a href="#">Inactive List</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="#">Add New</a>
            </li>
            <li>
                <a href="#">View / Edit</a>
            </li>
            <li>
                <a href="#">Inactive List</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="#">Add New</a>
            </li>
            <li>
                <a href="#">View / Edit</a>
            </li>
            <li>
                <a href="#">Inactive List</a>
            </li>
        </ul>
    </li>
</ul>

Answer 2

You could try doing that using the .toggleClass method. Doing it in a way suggested by Nicolas would be rather clumsy since you would need additional code to change them back again and toggle is much more semantically correct in this context.

$('li a').click(function(){
    $(this).find('i').toggleClass('fa-folder fa-folder-open');
});