title: How can I use toggleClass to switch between Fahrenheit and Celsius on my $('p') tag when clicked
body: <p>Why won't the <code>toggleClass()</code> work on the <code>$('p')</code>  that is suppose to switch between Fahrenheit to Celsius and back to Fahrenheit and so forth as many times as users want?</p>
  <p>Link to Code: <a href="http://codepen.io/duel_drawer8/pen/bpoozL" rel="nofollow noreferrer">http://codepen.io/duel_drawer8/pen/bpoozL</a></p>
  <p>My full code if you can't see link:</p>
  <pre><code>//Our ID key for weather app
  var appID = &quot;&amp;APPID=f74316dbe7442f12d602b1cae1a5172b&quot;;
  
  var city;
  var state;
  var fahrenheit = &quot;&amp;units=imperial&quot;;
  var temp;
  
  //using a geo-location API to get city and state info of current user
  $.getJSON('http://ip-api.com/json/?callback=?', function(data) {
    city = data.city;
    state = data.regionName;
    getWeather(city, state);
  });
  
  //using weather API and outputting results into our HTML
  function getWeather(city, state) {
    var api = &quot;http://api.openweathermap.org/data/2.5/weather?q=&quot; + city + &quot;,&quot; + state + &quot;&quot; + fahrenheit + &quot;&quot; + appID;
  
  $.ajax({
  url: api,
  dataType: 'json',
  success: function(data) {
    temp = data.main.temp;
    $('h3').text(city + &quot;,&quot; + state);
    $('p').html(temp + '&amp;deg F');
   
    }
   });
  }
  
  $('p').on('click', function(){
      $('p').text(changeTemp(temp));
      $('p').toggleClass(changeTemp(temp));
  });
  
  function changeTemp(temp){
     var cel = (temp - 32) * 5/9;
     return cel;
  };
  </code></pre>