CODEWITHSUNDEEP
javascriptjqueryhtmlcssfont-awesome
techspider
techspider

Reputation: 3410

How do I change font-awesome icon?

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.

Nav Image

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?

Upvotes: 3

Views: 11863

Answers (4)

Nicolas
Nicolas

Reputation: 8650

you can change the class of the element and it will change the icon. For example, you can do something like this : 

$('.firstMenuItem').on('click', function(){
  $(this).find('i').removeClass('fa-folder').addClass('fa-folder-open');
  // rest of the code
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="firstMenuItem"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>

Upvotes: 3

ssc-hrep3
ssc-hrep3

Reputation: 16069

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>

Upvotes: 6

Juan de Dios
Juan de Dios

Reputation: 2789

In jQuery: JS Bin Link: http://jsbin.com/razaxis Thanks to @ssc-hrep3 example.

$(document).ready(function() {
  $('ul li ul').hide();
  $('.navbutton').click(function() {
    $(this).parent().find('ul').toggle();
    $(this).find('.fa-folder,.fa-folder-open').toggleClass('fa-folder').toggleClass('fa-folder-open');
  });
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
  <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>

Upvotes: 0

Alexander Rossa
Alexander Rossa

Reputation: 2080

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');
});

Upvotes: 5

Related Questions