the function used from jquery is not working - $ not defined

Question

I was working on an html css jquery project and I have encountered a problem related to a jquery function. I am unable to find the error correction. Please help me out.

$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'horizontal',
    auto: true,
  });
  $('.menu-togglr').on('click',function(){
    $('#main-nav').slideToggle('fast');
    $(this).toggleClass('active');
  });
});

here the errors are

1. $ not defined

and the part from $('.menu-togglr)., is not working.

Answer 1

$ not defined means that, you have to check the reference to JQuery file. Adding reference to the JQuery file or correcting that file reference might solve all the remaining problems.

Answer 2

The error you've gotten - $ is not defined - means you haven't imported jQuery. Add this to your HTML page, before your script, and your code will work:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

This should also fix the error you're having with this line:

$(".menu-togglr").on("click", function() {...})

Answer 3

It is simply because of two reasons:

1. When you link with the wrong source file in your script tag.The correct code should be

   <script type="text/javascript" src="your relative path"></script>

2. When you are using cdn and your internet is not working properly.This could lead to non loadable jquery file and hence the error.