Search code examples
javascriptjquerygoogle-font-api

Toggle a Google font effect with JavaScript

I am trying to create a small hidden button for a webpage that will toggle a Google font effect on all of the h1 elementss on the page but I'm not entirely sure how to go about it or if it's even doable. Here is the code I have so far, any guidance here would be greatly appreciated.

$(".flameOn").click(function(){
    var $this = $(this);
    $this.find("h1").toggleClass("font-effect-fire");
});

The .flameOn class is attached to the button being hit.

Solution

  • The problem is likely here:

    $this.find("h1").toggleClass("font-effect-fire");

    What you are, in effect, doing is trying to find h1 elements within the clicked flameOn class element, which of course makes no sense. You probably just need your click handler to look like this:

    $(".flameOn").click(function(){
    $("h1").toggleClass("font-effect-fire");
});