javascript file not working when linked from HTML

so I feel(and hope) this is pretty simple. I am new to javascript and am trying to get this working. When I link to my external .js file from my html it does not function. However, when entering the script code directly into my HTML it DOES work.

Here is the js file:

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

This is the index.html file:

<!DOCTYPE html>
<html>
<head>
    <title>slidepanel test</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>


<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

</body>
</html>

and this is the CSS:

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

Solution

You are using jQuery, but it doesn't seem like you have included it. Add this to your HEAD element

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>