Question: I've looked at the other threads on this, there are quite a few. I honestly have no clue what's going on here.

I'm trying to show my 'nav' on click. However, it's only adding my active class right now. nav won't show

**html structure**

```
<div class="nav-container">
    <div class="nav-handle"><i class="fa fa-bars">nav icon</i></div>

     <nav role="navigation">
          <ul role="menu">
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Contact</a></li>
            </ul>
      </nav>
</div>

```

**css**

```
nav {
 display:none;
}

```

**jquery i've tried**

```
$(".nav-container").on('click', '.nav-handle', function () {
          $("nav").fadeIn('fast');
          $(".nav-handle").toggleClass('active');
     }, function () {
         $("nav").fadeOut('fast');
         $(".nav-handle").toggleClass('active');
     });

```

Answer: 
You are assigning two callbacks to the [`click`](http://api.jquery.com/click/) event. However, unlike the [`hover`](http://api.jquery.com/hover/) event, the `click` event only accepts a single callback.

It seems to be executing only your second callback above.

There is a `fadeToggle` that you can use though, and make a single callback:

```
$(".nav-container").on('click', '.nav-handle', function () {
    $("nav").fadeToggle('fast');
    $(".nav-handle").toggleClass('active');
});

```

Here is a [*jsFiddle*](http://jsfiddle.net/G6jVc/) showing this working.
the on function only accepts one callback function. you should put the logic to hide or show inside one function.

something like this:

```
$(".nav-container").on('click', '.nav-handle', function () {
     $("nav").fadeToggle('fast');
     $(".nav-handle").toggleClass('active');
 });

```