Why Bootstrap 4 Toggle button is not working?

Question

I am working with Laravel 5.8 and Bootstrap 4. I have been installed Bootstrap via npm with the Laravel project and I have following toggle button in the blade file

 <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

and following jquery code to work above toggle button

<script>
$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});
</script>

but when clicked the toggle button here it is not working. how to fix this problem?

Answer 1

Make sure you have jQuery file above all js files even bootstrap ones.

Paste this code before all js files.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Now it should work Note:- Take care that jQuery core-library/base-library need to be added first and then only any other jQuery file/library can be added. All other bootstrap js files are dependent on jQuery so it should be imported first.

Also if its still not working then check out if there is any error in your code or not.