Javascript-Datei funktioniert nicht, wenn sie über HTML verlinkt ist

Ich fühle (und hoffe), dass dies ziemlich einfach ist. Ich bin neu in Javascript und versuche, dies zum Laufen zu bringen. Wenn ich von meinem HTML-Code aus eine Verknüpfung zu meiner externen .js-Datei herstelle, funktioniert dies nicht. Wenn Sie den Skriptcode direkt in mein HTML eingeben, funktioniert er jedoch.

Hier ist die js-Datei:

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

Dies ist die Datei index.html:

<!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>

und das ist das CSS:

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

Antworten auf die Frage(6)

Ihre Antwort auf die Frage