title: Javascript Show/Hide elements, why isn't this code working?
body: <p>So, as you can see I amusing javascript to show/hide elements, however when you click the .png it shows the text but does not hide the other element's text.  I have been going over and over this script and Google searching the hell out of it and I cannot come up with an answer.  I think I need another pair of eyes, so if anyone takes a look at this let me know if there are errors or if I'm missing some code.  </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" /&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  &lt;script type="text/javascript" src="NKit.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  
  &lt;script type="text/javascript"&gt;
  
  function showStuff(id) {
      document.getElementById(id).style.display = 'block';
  }
  function hideStuff(id) {
      document.getElementById(id).style.display = 'none';
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt; 
  
  &lt;body&gt; 
  
  &lt;div class="content"&gt;
  
  &lt;section class="left"&gt;  
  
          &lt;p&gt;
              &lt;a href="#" onclick="showStuff('character1');" onclick="hideStuff('character2');"&gt;&lt;img src="character1.png" id="char1" /&gt;&lt;/a&gt;
  
          &lt;/p&gt; 
  
          &lt;p&gt;
              &lt;a href="#" onclick="showStuff('character2');" onclick="hideStuff('character1');"&gt;&lt;img src="character2.png" id="char2" /&gt;&lt;/a&gt;
          &lt;/p&gt; 
  
  &lt;/section&gt;
  
  &lt;section class="right"&gt;
  
          &lt;span id="character1" style="display: none;"&gt;Show character1 information&lt;/span&gt; 
  
          &lt;span id="character2" style="display: none;"&gt;Character 2 information&lt;/span&gt; 
  
  &lt;/section&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>