JQuery click function not firing off

Question

The problem I am running into is that I have this responsive navigation built. I only want it to dropdown when the hamburger icon is clicked, but it will not work if I try targeting it. It only works if I target the entire navbar it is nested in.

Here is a link to a local jsFiddle here

HTML Code

<div class="toggleMenu">
  <button type="button" class="navbar-toggle" id="toggle-btn"></button>
</div>

<nav class="level-nav hidden-md">
  <ul>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Pulses</a></li>
    <li><a href="#">Kudos</a></li>
    <li><a href="#">Blogs</a></li>
    <li>
      <a href="#">Resources <b class="caret"></b></a>
      <div class="level-inner">
        <span class="split"></span>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

JQuery Code

$(document).ready(function(){
  var mobileMenu = $(".level-nav li a");
  $(mobileMenu).each(function() {
    if ($(this).next().length > 0) {
        $(this).addClass("parent");
    };
  })

  /* Defined variables for main and sub multi-level navigations */
  var subNav = $("#toggle-btn");

  /* Function that activates the sub-navigation bar to toggle the sibiling which is the  .level-nav */
  $(subNav).click(function (e){
    e.preventDefault();
    $(this).siblings(".level-nav").toggle(175, "easeInQuad");
  });
});

Answer 1

The button is not a sibling of the navigation, it's wrapped in a DIV that is a sibling of the navigation

$(this).closest('.toggleMenu').siblings(".level-nav").toggle(175, "easeInQuad");

And to use toggle() like that, you'll have to include jQuery UI as well

FIDDLE