Force an Off-Screen Toggle Menu to close when selecting an anchor link?

Question

The Javascript solution I'm looking for should accomplish the following:

1. Toggle open Offscreen Toggle menu

2. Select an anchor tag menu link, which navigates to the anchored section on the same page

3. The toggle menu closes

This is the full code Fiddle demonstrating the issue: https://jsfiddle.net/fpbs6fkz/

NOTE: The Additional JS + CSS are too long to post on stack overflow**

The problematic JavaScript:

// Find all menu links
var navLinks = document.querySelectorAll('.c-menu__link');
// For each menu link
var index = 0, length = navLinks.length;
for ( ; index < length; index++) {
    // Attach click event, on click call close function
    navLinks[index].addEventListener('click',
        function () {
            slideLeft.close();
        }
    );
}

Above is the javascript function that should close the toggle menu every time I click on an anchor link and navigate to the desire section, but it's not working at all.

HTML:

<!-- Start of Slidesmenu -->
<div class="mobilemenu">
  <div class="wsmenucontent overlapblackbg"></div>
    <div class="wsmenuexpandermain slideRight">
    <a id="navToggle" class="animated-arrow slideLeft"><span></span></a>
    <a href="#" class="smallogo"><img src="assets/img/logo4.png" width="120" style= "margin-top:-5px;" alt="" /></a>

  </div>

  <nav  id="c-menu--slide-left" class="wsmenu slideLeft">
   <ul class="mobile-sub wsmenu-list">                          
    <li class="c-menu__item"><a href="#about" class="c-menu__link active"><i class="fa fa-home"></i>About</a></li>
    <li class="c-menu__item"><a href="#contact" class="c-menu__link"><i class="fa fa-road"></i>Contatc</a></li>
    <li class="c-menu__item"><a href="#fhowitworks" class="c-menu__link"><i class="fa fa-flask"></i>How it Works</a></li>
    <li class="c-menu__item"><a href="#tools" class="c-menu__link"><i class="fa fa-puzzle-piece"></i>Tools</a></li>
    <li class="c-menu__item"><a href="#help" class="c-menu__link"><i class="fa fa-wrench"></i>Help</a></li>
    <li class="c-menu__item"><a href="#customers" class="c-menu__link"><i class="fa fa-server"></i>Customers</a></li>
    <li class="c-menu__item"><a href="#business" class="c-menu__link"><i class="fa fa-lock"></i>Business</a></li>
    <li class="c-menu__item"><a href="#location" class="c-menu__link"><i class="fa fa-users"></i>Location</a></li>
    <li class="c-menu__item"><a href="contact.html" class="c-menu__link"><i class="fa fa-envelope-o"></i>Contact</a></li>
   </ul>
  </nav>
</div>
<div id="about"><p>About</p></div>
<div id="contact"><p>Contact</p></div>
<div id="howitworks"><p>How it Works</p></div>
<div id="tools"><p>Tools</p></div>
<div id="help"><p>Help</p></div>
<div id="customers"><p>Customers</p></div>
<div id="business"><p>Business</p></div>
<div id="location"><p>Location</p></div>

<script>window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.11.2.min.js"><\/script>')</script>

So my question is:

How do I fix the JavaScript code so that the toggle menu closes, and navigates to the anchored section when I select an anchor menu link?

Answer 1

Despite the horrendous layout of the code and the obfusticated javascript, you can simply replace:

slideLeft.close();

with

$("#navToggle").click()

I would normally tell you to reuse the click event handler for #navToggle, but it's hidden away.

For a more "jquery" solution, replace your entire javascript (that you included in the question and that isn't hidden in the fiddle) with:

$(".c-menu__link").click(function() { $("#navToggle").click() })

Updated fiddle: https://jsfiddle.net/wqd39kL2/1/