I'm having trouble getting my dropdown menu to work properly and I can't figure out why. The JavaScript code should toggle a class that hides the language options and slides up the other tabs like "Contact". However, when I click the button, nothing happens at all. The class "dp-click" is supposed to be toggled to show or hide the menu, while the class "dp-contents" controls the visibility of the languages when the "dp-click" class is clicked. Here's the HTML code:
<html>
<head>
<link href="Style.css" type="text/css" rel="stylesheet">
<title>Enforcext</title>
</head>
<div class="nav">
<div class="container">
<img src="http://www.destinygamewiki.com/images/7/72/Enforcer_medal1.png" width="50px">
<ul class="links">
<li style="margin: 5px; margin-left: 15px;"><a href="Index.html">Home</a></li>
<div class="lt">
<div class="dp-click">
<li style="margin: 5px; margin-left: 15px" class="dp-click"><a href="#" class="dp-click">Languages</a></li>
</div>
</div>
</ul>
<div class="lt">
<ul class="dp-contents links">
<li style="margin: 5px; margin-left: 25px"><a href="PHP.php">PHP</a></li>
<li style="margin: 5px; margin-left: 25px"><a href="HTML.html">HTML</a></li>
<li style="margin: 5px; margin-left: 25px"><a href="CSS.html">CSS</a></li>
<li style="margin: 5px; margin-left: 25px"><a href="Javascript.html">JavaScript</a></li>
</ul>
</div class="lt">
<ul class="links">
<li style="margin: 5px; margin-left: 15px;"><a href="Contact.php">Contact</a></li>
</ul>
</div>
</div>
<body>
</body>
<script src="Javascript.js"></script>
</html>
CSS:
.nav {
border: 1px black solid;
background-image: url(Texture2.jpeg);
width: 10%;
height: 100%;
}
.links{
display: inline;
text-decoration: none;
}
.links a{
text-decoration: none;
display: inline;
color: yellow;
}
.links a:hover{
font-family: Impact;
}
.dp-contents{
height: 0px;
opacity: 0%;
color: white;
}
.dp-show{
color: purple;
font-size: 20px;
}
JS:
var main = function(){
$('.dp-click').click(function(){
$('.dp-contents').toggle();
});
}
$(document).ready(main);