title: Javascript/jQuery Change CSS On Click Not Working
body: <p>I'm trying to make three different buttons that switch between three different images using the CSS display property (this is so all the images will load when the webpage loads). However, it is not working, and I don't know what is wrong with my code.</p>
  
  <p><a href="https://jsfiddle.net/agt559e8/" rel="nofollow">https://jsfiddle.net/agt559e8/</a> -- My Code</p>
  
  <pre><code>function USradarChange1() {
      //document.getElementById("usradar1").src="weather/current-usradar.gif";
      $('#USradarChangeButton1').click(function() {
          $('#usradar1').css({ 'display': 'inline' });
          $('#usradar2').css({ 'display': 'none' });
          $('#usradar3').css({ 'display': 'none' });
      });
  }
  
  function USradarChange2() {
      //document.getElementById("usradar2").src="weather/usradar-an12hour.gif";
      $('#USradarChangeButton2').click(function() {
          $('#usradar1').css({ 'display': 'none' });
          $('#usradar2').css({ 'display': 'inline' });
          $('#usradar3').css({ 'display': 'none' });
      });
  }
  
  function USradarChange3() {
      //document.getElementById("usradar3").src="weather/usradar-an7day.gif";
      $('#USradarChangeButton3').click(function() {
          $('#usradar1').css({ 'display': 'none' });
          $('#usradar2').css({ 'display': 'none' });
          $('#usradar3').css({ 'display': 'inline' });
      });
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="button-container"&gt;
      &lt;a class="button" id="USradarChangeButton1"&gt;Current US Radar&lt;/a&gt;
      &lt;a class="button" id="USradarChangeButton2"&gt;US Radar 12 Hours&lt;/a&gt;
      &lt;a class="button" id="USradarChangeButton3"&gt;US Radar 7 Days&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="imgcontainer"&gt;
      &lt;img class="radar-img" id="usradar1" src="weather/current-usradar.gif" alt="Current US Radar"&gt;
      &lt;img class="radar-img" id="usradar2" src="weather/usradar-an7day.gif" alt="Current US Radar"&gt;
      &lt;img class="radar-img" id="usradar3" src="weather/usradar-an12hour.gif" alt="Current US Radar"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas?</p>