[jQuery] using doc.ready in an external .js file

[kgosser]

Here's what I'm not getting about jQuery from a novice point of view.
Let's say I have this:

        <script type="text/javascript">
                $(document).ready(function() {
                        $("#switcherBtn").click(function(){
                                $("#target").toggleClass("nodisplay");
                        });
                });
        </script>

I have a function to toggle the display of a certain div. This div is
on virtually all my pages, though, so instead of putting this in the
header of each page, I want to put it in a global include file, for
example main.js.

I don't understand why copying and pasting

                $(document).ready(function() {
                        $("#switcherBtn").click(function(){
                                $("#target").toggleClass("nodisplay");
                        });
                });

into main.js throws this error in Firebug:

$ is not defined
main.js()()main.js (line 1)
$(document).ready(function(){



Any input?