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?
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?
Share Improve this question edited Feb 4, 2017 at 2:25 Alexander Rossa 2,0901 gold badge26 silver badges39 bronze badges asked Feb 2, 2017 at 20:26 techspidertechspider 3,40813 gold badges38 silver badges65 bronze badges 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 Commented Feb 2, 2017 at 20:28
4 Answers
Reset to default 6I 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./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>
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');
});
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./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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>
In jQuery: JS Bin Link: http://jsbin./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./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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>