fadeToggle is not a function

Question

I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...

I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!

        <nav>
      <ul>
        <li><a href="https://facebook.com">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Work</a></li>
      </ul>
      <div class="button">
        <a class="btn-open" href="#"></a>
      </div>
    </nav>

    <div class="overlay">
        <div class="wrap">
            <ul class="wrap-nav">
                <li><a href="#">About</a>
                <ul>
                    <li><a href="#">About Company</a></li>
                    <li><a href="#">Designers</a></li>
                </ul>
                </li>
                <li><a href="#">Services</a>
                <ul>
                    <li><a href="https://www.google.hr/">Web Design</a></li>
                    <li><a href="#">Development</a></li>
                    <li><a href="#">Apps</a></li>
                    <li><a href="#">Graphic design</a></li>
                    <li><a href="#">Branding</a></li>
                </ul>
                </li>
                <li><a href="#">Work</a>
                <ul>
                    <li><a href="#">Web</a></li>
                    <li><a href="#">Graphic</a></li>
                    <li><a href="#">Apps</a></li>
                </ul>
                </li>
            </ul>
            <div class="social">
                <a href="http://mario-loncarek.from.hr/">
                <div class="social-icon">
                    <i class="fa fa-facebook"></i>
                </div>
                </a>
                <a href="#">
                <div class="social-icon">
                    <i class="fa fa-twitter"></i>
                </div>
                </a>
                <a href="#">
                <div class="social-icon">
                    <i class="fa fa-codepen"></i>
                </div>
                </a>
                <a href="#">
                <div class="social-icon">
                    <i class="fa fa-behance"></i>
                </div>
                </a>
                <a href="#">
                <div class="social-icon">
                    <i class="fa fa-dribbble"></i>
                </div>
                </a>
                <p>
                    From: Zagreb, Croatia<br>
                     Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
                </p>
            </div>
        </div>
    </div>

And this is the JS

$(document).ready(function(){
    $(".button a").click(function(){
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
    $('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!

P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.

Thank you in advance!

Answer 1

Just a heads up, I ran into this issue because I unknowingly had included the SLIM build which apparently jettisons pretty animations such as fadeToggle.