title: Jquery toggle information on click
body: <p>I am trying to have a button when on click, changes its HTML and the HTML of another element. I have it working, but it only triggers once. I am trying to get it to toggle between fahrenheit and celsius when clicked. I have tried two separate if statements, and toggle method but not sure if I attempted it the right way.</p>
  
  <p>Here is my code.</p>
  
  <pre><code>  var c = $("button:contains(°C)");
    var f = $("button:contains(°F)");
  
    $('.temp-switch').on('click', function () {
      if (f) {
        $('.temp').html((Math.round(data.main.temp * 10) / 10) + " °C");
        f.html("°C");
      } else {
        $('.temp').html(Math.floor(data.main.temp * 1.8) + " °F");
        c.html("°F");
      }
    });
  </code></pre>
  
  <p>Here is the HTML to prevent any confusion.</p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;div class="card p-2"&gt;
        &lt;div class="row"&gt;
          &lt;h3 class="header mx-auto"&gt;Local Weather&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="row icon-box mx-auto"&gt;
          &lt;img class="weather-icon mx-auto"&gt;
        &lt;/div&gt;
        &lt;div class="row info-box mx-auto"&gt;
          &lt;div class="location mx-auto"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row info-box mx-auto"&gt;
          &lt;div class="desc mx-auto"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row info-box mx-auto"&gt;
          &lt;div class="temp mx-auto"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row info-box mx-auto"&gt;
          &lt;button type="button" class="btn btn-primary center mx-auto temp-switch w-50"&gt;°F&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>