CODEWITHSUNDEEP
jqueryhtmlcss
Hannah Baxter
Hannah Baxter

Reputation: 15

How to fix toggleClass jQuery not working

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);
}

Upvotes: 0

Views: 37

Answers (1)

AKosarek
AKosarek

Reputation: 191

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.

Upvotes: 2

Related Questions