Toggling the active class to change the font awesome icon
Question
I have a dashboard where I have placed the font-awesome icons. I want to toggle between plus and minus when the dashboard item is clicked. But when I try to do that only the first item is getting toggled even when I click other dashboard items.
$(".dropdown").click(function() { /*$(".dropdown").removeClass("active"); $(this).addClass("active");*/ if ($('#plusMinus').hasClass('fa-plus-square')) { $('#plusMinus').hasClass('fa-plus-square') $('#plusMinus').removeClass('fa-plus-square'); $('#plusMinus').addClass('fa-minus-square'); } else { $('#plusMinus').removeClass('fa-minus-square'); $('#plusMinus').addClass('fa-plus-square'); } });
.dropdown-toggle::after { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-10 col-md-3 col-lg-3 col-sm-6"> <div class="dashBoard animated slideInLeft"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 1<span><i class="fa fa-plus-square" id="plusMinus" aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 2<span><i id="plusMinus" class="fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 3<span><i id="plusMinus" class="fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
3 answers
solution1
3 2017-02-03 11:42:50
You are using id s to select your icons. HTML id s are supposed to be unique in a page ( more info ), and when you try to select them with jQuery, you always get the first one it meets (see the jQuery ID selector docs ).
To solve your issue, select the icons by starting from the clicked element using jQuery's .find method , and not the whole document, and use class es instead of id s:
$(".dropdown").click(function() { var button = $(this).find('.plusMinus'); if (button.hasClass('fa-plus-square')) { button.removeClass('fa-plus-square'); button.addClass('fa-minus-square'); } else { button.removeClass('fa-minus-square'); button.addClass('fa-plus-square'); } });
.dropdown-toggle::after { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-10 col-md-3 col-lg-3 col-sm-6"> <div class="dashBoard animated slideInLeft"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 1<span><i class="plusMinus fa fa-plus-square" aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 2<span><i class="plusMinus fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 3<span><i class="plusMinus fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
solution2
2 2017-02-03 11:44:17
The problem is that in your control you used a common ID , and ID's can't be more than one, so JQuery find always the first element. If you want to get the clicked element you have to use this , look at this example:
$(".dropdown").click(function() { /*$(".dropdown").removeClass("active"); $(this).addClass("active");*/ if ($(this).find("#plusMinus").hasClass('fa-plus-square')) { $(this).find("#plusMinus").hasClass('fa-plus-square') $(this).find("#plusMinus").removeClass('fa-plus-square'); $(this).find("#plusMinus").addClass('fa-minus-square'); } else { $(this).find("#plusMinus").removeClass('fa-minus-square'); $(this).find("#plusMinus").addClass('fa-plus-square'); } });
.dropdown-toggle::after { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-10 col-md-3 col-lg-3 col-sm-6"> <div class="dashBoard animated slideInLeft"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 1<span><i class="fa fa-plus-square" id="plusMinus" aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 2<span><i id="plusMinus" class="fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 3<span><i id="plusMinus" class="fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
solution3
2 ACCPTED 2017-02-03 11:47:42
Identifiers in HTML must be unique Your HTML is invalid. I would recommend to add a common class ie plusMinus and then use it.
You need to target element in current element ie this context and use $.fn.find() to descendant of current element and the use $.fn.toggleClass()
$(".dropdown").click(function() {
$(this).find(".plusMinus").toggleClass('fa-plus-square fa-minus-square');
});
HTML
<i class="plusMinus fa fa-plus-square" aria-hidden="true"></i>
$(".dropdown").click(function() { $(this).find(".plusMinus").toggleClass('fa-plus-square fa-minus-square'); });
.dropdown-toggle::after { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-10 col-md-3 col-lg-3 col-sm-6"> <div class="dashBoard animated slideInLeft"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 1<span><i class="plusMinus fa fa-plus-square" aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 2<span><i class="plusMinus fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Module 3<span><i class="plusMinus fa fa-plus-square " aria-hidden="true"></i></span> </a> <div class="dropdown-menu animated flipInX" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Toggling Font Awesome 5 icon with React
Toggle font awesome icon if active?
Change Font Awesome Icon on click
change font awesome icon in jquery
Change Font Awesome Icon Only
jQuery Accordion change font awesome icon class on click
Font awesome icons and toggling
Toggling Font Awesome Icons
Font Awesome 5 icon's class binding change doesn't affect the icon
change font awesome icon rotate and scale in on hover
Related Tags