Javascript not defined, not a function error

Question

I'm trying to fix the mobile navigation on my site, but I'm encountering an issue I don't understand where the problem is.

I have this:

<header class="main__header">
  <div class="container">
    <nav class="navbar navbar-default" role="navigation"> 
      <div class="navbar-header">
        <a href="javascript:void()" class="submenu">Menus</a> </div>
      <div class="menuBar">
        <jdoc:include type="modules" name="navigation"/>
      </div>
    </nav>
  </div>
</header>

and this:

<script type="text/javascript">
        $("a.submenu").click(function() {
            $(".menuBar").slideToggle( "normal", function() {
                // Animation complete.
            } );
        } );
        $("ul li.dropdown a").click( function () {
            $("ul li.dropdown ul").slideToggle("normal",function() {
                // Animation complete.
            } );
            $('ul li.dropdown').toggleClass('current');
        } );
</script>

but I'm getting this error when I try to click the a.submenu dropdown button for mobile, and the menuBar div isn't changing to 'visible':

Uncaught TypeError: $ is not a function
    at HTMLAnchorElement.<anonymous> ((index):1022)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.YTF.$event.dispatch (script.js?v=4.4.5:407)
    at HTMLAnchorElement.r.handle (jquery.min.js:3)

(index):1022 is the "$(".menuBar").slideToggle( "normal", function() {" line.

I have jquery 3.5.1 loaded.

Thanks.

Answer 1

Your code is either ran before JQuery is loaded (before its tag) or you don't have JQuery loaded at all.