Menu toggleClass open doesn't work

Question

I'm just trying to simply using toggleClass to trigger a class of .open on a closed menu. Here's an image of what it should look like before and after:

So I know this is pretty simple as I've made it work before, but I can't figure out why it won't work now.

My HTML is like this:

<div id="nav">
     <h1>SAKURA GARAGE</h1>
     <a href="javascript:void(0)" id="button" class="menu_toggle_container">
     <span class="menu_toggle"></span>
     </a>
     <ul class="menu">
          <li><a href="#" title="products">Products</a></li>
          <li><a href="#" title="services">Services</a></li>
          <li><a href="#" title="gallery">Gallery</a></li>
          <li><a href="#" title="about">About</a></li>
     </ul>
</div>

My css is:

#nav{
background-color:black;
position:absolute;
z-index:115;
top:0;
padding:18px 0 18px 25px;
@include span-columns(12);
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out; 
    h1{
    @include span-columns(5);
    letter-spacing: .1em;
    }

    .menu{
    height:0em;
    max-height:0%;
    overflow:hidden;
    }

    .open{
    height:10em;
    max-height:100%;
    overflow:hidden;
    }
}

Jquery:

$("#button").click(function(){
    $(".menu").toggleClass(".open");
});

And here's a live version:Live Example

I have a hamburger icon that when clicked, animates to change to an x. I found the code online and it works fine, but I'm not sure if that's what's messing with the toggle class. When I inspect element, I can see the class of .open being added and removed, but nothing changes.

Hopefully this isn't toooo simple of a solution...Thanks for reading though!

Answer 1

Try without the . in the toggleClass method:

$(".menu").toggleClass("open");

Also, your CSS is a little off. You have an extra closing } after the .open class. Is this a typo on Stack Overflow? The closing } should be after the #nav properties have been declared.

Something like this:

#nav{
  background-color:black;
  position:absolute;
  z-index:115;
  top:0;
  padding:18px 0 18px 25px;
  @include span-columns(12); /* not sure what this does? */
  -webkit-transition: height 0.5s ease-in-out;
  -moz-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
}

h1{
  @include span-columns(5); /* not sure what this does? */
  letter-spacing: .1em;
}

.menu{
  height:0em;
  max-height:0%;
  overflow:hidden;
}

.open{
  height:10em;
  max-height:100%;
  overflow:hidden;
}

Answer 2

Use this:

 $(".menu").toggleClass("open");

Instead of this

  $(".menu").toggleClass(".open");

You do not need a dot as a prefix as the method already assumes its argument to be a class.