CODEWITHSUNDEEP
jquery
charlie
charlie

Reputation: 481

JQuery to change icon in HTML

I have this HTML:

<i class="fa fa-toggle-on"></i>

which just shows an icon, how can i change this class to fa fa-toggle-off using jQuery?

I also want to be able to change it back to on

Upvotes: 3

Views: 66

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115212

Use toggleClass()

$('.fa').toggleClass('fa-toggle-on fa-toggle-off');


$('.fa').click(function() {
  $(this).toggleClass('fa-toggle-on fa-toggle-off');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i class="fa fa-toggle-on"></i>

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can use toggleClass:

$('i').toggleClass('fa-toggle-on fa-toggle-off');

Upvotes: 1

Related Questions