Although this question has been asked previously, I am still a bit confused about the issue at hand. In my index.html file, I have a script tag that links to an external JS file. When only that script tag is present, the JS does not seem to function. However, if I copy and paste the JS into its own script tag within the HTML header, it works perfectly fine. It seems like there might be something missing in regards to Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section"><a href="#" style="cursor:pointer;">Click Me</a></span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
The code inside the last script tag, which contains jQuery functions, has been exactly duplicated into its separate JS file named FinalProjectJS.js. In its current state within the HTML file, this code functions as intended. However, when removed from the HTML file, it no longer works properly. Apologies for my lack of expertise, as I am relatively new to this. Any assistance would be greatly appreciated! Thank you!