Javascript – Uncaught TypeError: .slideToggle is not a function

javascriptjquery

I have jquery in a different file located in the same map, I'm using this code below to activate the .slideToggle function. However it's not working, why?

jQuery(document).ready(function ($) {

    // get li items
    var ul = document.getElementById("menu-footermenu");
    var items = ul.getElementsByTagName("li");

    // display 5 li items, hide others
    for (var i = 0; i < items.length; ++i) {
        if (i > 5) {
            items[i].style.display = "none"
        }
    }

    // when clicking on more catogories button, display all items
    $('#morecat').click(function () {
        for (var i = 0; i < items.length; ++i) {
            if (i > 5) {
                items[i].slideToggle();
                document.getElementById("morecat").style.display = "none";
            }
        }
    });
});

I'm getting the error:

Uncaught TypeError: .slideToggle is not a function

Best Solution

make sure, NOT to use the slim version of jquery, which excludes the effects like the animation.

Related Solutions

Javascript – n “exists” function for jQuery

In JavaScript, everything is 'truthy' or 'falsy', and for numbers 0 means false, everything else true. So you could write:

if ($(selector).length)

You don't need that >0 part.

Javascript – var functionName = function() {} vs function functionName() {}

The difference is that functionOne is a function expression and so only defined when that line is reached, whereas functionTwo is a function declaration and is defined as soon as its surrounding function or script is executed (due to hoisting).

For example, a function expression:

// TypeError: functionOne is not a function
functionOne();

var functionOne = function() {
  console.log("Hello!");
};

And, a function declaration:

// Outputs: "Hello!"
functionTwo();

function functionTwo() {
  console.log("Hello!");
}

Historically, function declarations defined within blocks were handled inconsistently between browsers. Strict mode (introduced in ES5) resolved this by scoping function declarations to their enclosing block.

'use strict';    
{ // note this block!
  function functionThree() {
    console.log("Hello!");
  }
}
functionThree(); // ReferenceError

Best Solution

Related Solutions

Javascript – n “exists” function for jQuery

Javascript – var functionName = function() {} vs function functionName() {}

Related Question