jQuery Uncaught TypeError $ is not a function (onl

Question

I am quite new to jQuery and I am trying to include a toggle-nav script to my Joomla template. I included the latest version of jQuery and my .js file where the function is stored in. The script works on few pages (e.g home, shop), but it does not work on pages where I display an article page.

I tried to replace the script with a simple alert. The alert shows up on all pages, so the script is included correctly. Maybe the jQuery isn't included correctly, but why should it work on the home or shop then..

I only found answers regarding this issue where the script does not work, but in my case it works on a few pages of my website.

Here is my function:

$(document).ready(function() {

    $('.toggle-nav').click(function() {
      $('.navigation').toggleClass('show');
    });
});

Thank you very much!

Answer 1

Your script is probably conflicting with mootools which is common depending on your joomla version and script setup. Try the following:

// You might need this, usually it's autoloaded   
jQuery.noConflict();

// Replace $ with jQuery
jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function() {
      jQuery('.navigation').toggleClass('show');
    });
});