Não consigo ativar o menu usando JavaScript

<div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="/" aria-current="page" class="brand-wrapper w-nav-brand w--current">
<div class="logo-text">XO</div>
</a>

<nav role="navigation" id="menu" class="nav-menu w-clearfix w-nav-menu"><a class="nav-link w-nav-link">Test</a><aclass="nav-link w-nav-link">Test</a><a href="#" class="nav-link w-nav-link">Test</a><a " class="nav-link w-nav-link">test</a><a class="nav-link w-nav-link">Test</a></nav>

<div id="icon" class="menu-button w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>

<script>
$(document).ready(function(){
$('#icon').click(function(){
$('#menu').toggleClass('active');
});
});
</script>

Podem me ajudar? ainda sou leigo