3

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?

1
  • 1
    Put both icons in there, and use a class on the parent <li> to indicate whether it's open or closed. Then use CSS to hide one <i> or the other based on the state of the menu.
    – Pointy
    Feb 2, 2017 at 20:28

4 Answers 4

6

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>

6
  • This works perfect but I have multiple li items. Let us says, I have another menu item "Department'. When I click on Job Title, it expands and changes icon. When I go to Department, it changes Department folder icon to open, closes Job Title group but doesn't change Job Title icon to folder close icon.
    – techspider
    Feb 2, 2017 at 20:47
  • You probably already have listener's on those elements (something opens and closes your lists). The best way would be, to put the icon stuff in those listener functions too. So basically: Search for code which opens and closes the lists and add this code there.
    – ssc-hrep3
    Feb 2, 2017 at 20:49
  • @techspider If you don't want to use the existing listener's you can also use the code from the updated snippet above. It mainly goes up to the main <ul> and then down again to every .fa-folder-open to close it. It then opens only the clicked one.
    – ssc-hrep3
    Feb 2, 2017 at 20:56
  • I tried adding in the existing listener but somehow something is getting overwritten. Your new code is so close to perfection. It works changing other elements icons when a new menu item is clicked. But, it doesn't work closing the same menu. If I expand Job Title and close Job Title by clicking it two times, it doesn't change self icon to close
    – techspider
    Feb 2, 2017 at 20:59
  • 1
    Yes, this is perfect. I have never used parents so far. Learnt something awesome today. Thanks
    – techspider
    Feb 2, 2017 at 21:20
5

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');
});
2
  • I kept it on onload, but this event never gets called.
    – techspider
    Feb 2, 2017 at 20:39
  • You would need to customise it for your own HTML a little. Try changing the $('li a') part or have a look at ssc-hrep3's answer. He has got the code snippet there so you can try it out. Feb 2, 2017 at 20:42
3

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>

6
  • You'd need to add something to remove fa-folder-open and replace with fa-folder when "open" nav item is clicked to go back to "closed" visual state. Feb 2, 2017 at 20:32
  • @AlexanderStaroselsky that's what I did, is there an error in my code ?
    – Nicolas
    Feb 2, 2017 at 20:33
  • what is the class navbutton?
    – techspider
    Feb 2, 2017 at 20:33
  • @techspider it's the li button. give me a second i'll try to edit my answer.
    – Nicolas
    Feb 2, 2017 at 20:34
  • @Nicolas, there would need to be a check inside the click event handler to see whether the menu is opened or closed. If closed, it should remove fa-folder and add fa-folder-open. If open, it should remove fa-folder-open and add fa-folder. The code shown right now will never handle the situation of the menu going from open to closed. The user would click on the menu item, the menu would close, and it would still show and "open" folder icon. Feb 2, 2017 at 20:51
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.