fontawesome+jQuery: it doesn't change the "thumb down" icon to the "thumb up" -

fontawesome+jQuery: it doesn't change the "thumb down" icon to the "thumb up" -

the problem jquery does not change "thumb down" icon "thumb up"

i have tried alter other properties, color, , tried alter "thumb down" icon "github" icon - these work well, not "thumb up"

html

<button id="change_color">change color</button> <button id="change_to_github">change github</button> <button id="thumbs_up">thumbs up!</button><br><br> <i class="fa fa-thumbs-o-down fa-5x"></i><br><br><br><br> <!-- here works --> <i class="fa fa-thumbs-o-up"></i>

jquery

$("#change_color").click(function(){ $(".fa-thumbs-o-down").toggleclass("red"); }); $("#change_to_github").click(function(){ $(".fa-thumbs-o-down").toggleclass("fa-github"); }); $("#thumbs_up").click(function(){ $(".fa-thumbs-o-down").toggleclass("fa-thumbs-o-up"); });

css

.red { color: red; }

here code on jsfiddle

appreciate help,

thanks

the reason doodlebunche's reply works first time using original font awesome icon class name in selector. 1 time alter class selector fail.

in situation tend utilize js specific classes handle js activities. added 'js-result' class in version. alternatively utilize id.

here's how write this:

<button id="change_color">change color</button> <button id="change_to_github">change github</button> <button id="thumbs_up">thumbs up!</button><br><br> <i class="js-result fa fa-thumbs-o-down fa-5x"></i><br><br><br><br> <!-- here works --> <i class="fa fa-thumbs-o-up"></i> <script> $(document).ready(function() { $("#change_color").click(function(e) { e.preventdefault(); $(".js-result").toggleclass("red"); }); $("#change_to_github").click(function(e) { e.preventdefault(); $(".js-result").toggleclass("fa-github"); }); $("#thumbs_up").click(functione() { e.preventdefault(); $(".js-result").toggleclass("fa-thumbs-o-up").toggleclass("fa-thumbs-o-down"); }); }); </script>

jquery icons font-awesome