CODEWITHSUNDEEP
jqueryruby-on-rails
gonzalo2000
gonzalo2000

Reputation: 648

Change toggle icon on click

I'm new to jquery, trying to switch font awesome icons upon toggle click on my rails 5 app. I used this question to implement the feature, but I'm not seeing the icon change effect.

<h2>Spanish <i id="click-spanish" class="fa fa-caret-down"></i></h2>

<div id="spanish-examples" class="initiallyHidden">
  etc.
</div>

And the jquery:

$(document).ready(function(){
  $('#click-spanish').click(function() {
    $('#spanish-examples').toggle('1000');
    $("i", this).toggleClass("fa-caret-down fa-caret-up");
  });
});

Removing this above achieves the result, but all other icons on the page change as well.

Upvotes: 0

Views: 3424

Answers (1)

Taplar
Taplar

Reputation: 24965

$(document).ready(function(){
  $('#click-spanish').click(function() {
    $('#spanish-examples').toggle('1000');
    //"this" is the click-spanish icon, since you are inside the click handler
    //for that element.  You just have to use it, not try to find it.
    $(this).toggleClass("fa-caret-down fa-caret-up");
  });
});

Upvotes: 2

Related Questions