0

I'm just starting out learning javascript and jQuery so want to get the basics down at the moment! I can't seem to get toggleClass working properly. When show menu is being clicked, nothing is appearing.

I've got jquery.js in the same directory and the rest of my code when I'm testing it in Chrome.

My mistake might be something super obvious (they normally are) but any help is really appreciated! The code below is a copy of an example given from the course I'm learning from, want to get it working before I apply to my own code.

<head>
    <style src="nav.css"></style>
</head>

<body>
    <a href="menu.html" class="show-menu">Show Menu</a>
<nav>
    <a href="about.html">About</a>
    <a href="blog.html">Blog</a>
    <a href="contact.html">Contact</a>
</nav>

<script src="jquery.js"></script>
<script src="nav.js"></script>
</body>

$('nav').hide()

$('a.show-menu').on('click', function(event){
    $('nav').toggleClass('show')
    event.preventDefault()
})

nav{
    opacity: 0;
    transform: translate(0, 10px);
    transition: all 0.5s;
}

nav.show {
    opacity: 1;
    transform: translate(0, 0);
}
Hannah Baxter
  • 15
  • 5

1 Answers1

2

Great first start!

The only thing you have to do is remove $('nav').hide()

What's happening: hide() is similar to css's display:none, and your css does not override it.

AKosarek
  • 191
  • 5
  • Thanks so much! This worked, but only when I added the css into the on my html rather than a separate css document? Any ideas why that might be? – Hannah Baxter May 09 '19 at 22:16
  • @HannahBaxter because `` isn't a thing. The `` tag is what you're looking for: `` – disinfor May 09 '19 at 22:20
  • @HannahBaxter some reading if you're curious: https://stackoverflow.com/questions/7122492/why-script-src-min-js-script-but-link-rel-stylesheet-href-min-why-no – disinfor May 09 '19 at 22:22