Cannot call method 'click' of undefined
<p>I am trying to implement a jQuery 'slide toggle'. At the top of the page (in the header) I have included:</p>

<pre><code>&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
</code></pre>

<p>Then the code of the area is:</p>

<pre><code>&lt;a href="#" id="morebutton" class="more"&gt;More&lt;/a&gt;
&lt;div class="toggler"&gt;
&lt;div id="morepanel" class="ui-widget-content ui-corner-all"&gt;
  &lt;p&gt;Text&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script src="js/toggle.js" type="text/javascript"&gt;&lt;/script&gt;
</code></pre>

<p>The toggle.js contains:</p>

<pre><code>$('#morebutton').click(function () {
$('#morepanel').slideToggle('slow', function () {
    // Animation complete.
});
});
</code></pre>

<p>When I click it I get the error:</p>

<blockquote>
  <p>Toggle.js:1Uncaught TypeError: Cannot call method 'click' of undefined.</p>
</blockquote>

<p>I can't at all figure out what to do. The divs are nested within further divs, and content holders, etc, but I can't see why this would be an issue.</p>
