title: Show Hide div in Chrome Extension popup using jQuery
body: <p>I've been trying to make an option show and hide(possibly toggle) in my browser action popup without success. 
  The code below is the body of my popup</p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
  &lt;div class="show"&gt;
      &lt;a href="#" class="showcontent"&gt;Show&lt;/a&gt;
      &lt;a href="#" class="hidecontent"&gt;Hide&lt;/a&gt;
      &lt;div class="somecontent"&gt;
          &lt;p&gt;some content&lt;br /&gt;
              &lt;a href="#"&gt;Link&lt;/a&gt;&lt;br /&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The popup.js file contains, among other things:</p>
  
  <pre><code>$(document).ready(function(){
      $(".somecontent").hide();
      $(".showcontent").click(function(){
          $(".somecontent").show();
      });
  
      $(".hidecontent").click(function(){
          $(".somecontent").hide();
      });
  });
  </code></pre>
  
  <p>I believe the problem is that the Chrome API is having problems with my popup.js file. The body appears in my popup but the Show and Hide actions do not work. Any ideas how to make this work and if not, another way to get the same result (ie: toggle on click)?</p>
  
  <p><strong>EDIT:</strong> From the javascript Console, the error I'm getting this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot call method 'ready' of null</p>
  </blockquote>
  
  <p>Which points to the line of the above code using the ready function.</p>