0

I have the following code in my app.js:

$scope.myData.mouseLeave = function(event) {
        var el = document.getElementById(event.target.id);
        console.log("hey, i'm running");
        el.style.backgroundColor = '#aabbcc';
    };
    $scope.myData.mouseClick = function(event) {
        console.log("yes I am also running");
        var header = document.getElementById(event.target.id);

        //getting the next element
        var content = header.nextSibling;
        if (content.classList.contains("container")) {
            //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
            $(content).slideToggle(500);
        }
    };
});

The mouseLeave works fine, but as I am trying to use a JQuery function in the mouseClick function, it is giving me the error in the browser that slideToggle is not a function. I've searched around and can't find really anything on this except one SO question that was not helpful. I am loading jquery before calling my js code so I'm not sure what the problem is.

How can I get slideToggle to work in my code?

Janie Lee
  • 29
  • 1
  • 1
  • 6

1 Answers1

0

slideToggle is a jQuery method but this is your code:

 var header = document.getElementById(event.target.id);
 //getting the next element
 var content = header.nextSibling;
 ...
 content.slideToggle(500);

That code creates a DOM object. A DOM object is not a jQuery object.

There is a way to create a jQuery object from a DOM object, in case you want to do that for some reason...

Sev
  • 15,401
  • 9
  • 56
  • 75
  • Try wrapping content with jQuery Object Constructor `$(content).slideToggle(500)` – Enjayy May 19 '16 at 22:59
  • @Enjayy I'm using http://stackoverflow.com/questions/625936/how-can-i-convert-a-dom-element-to-a-jquery-element this method to convert to a jquery object but now I'm getting $ is not defined. I load jquery before I call this code in my html so not sure how to get around this. – Janie Lee May 19 '16 at 23:00
  • @JanieLee You have to make sure that jQuery is loaded before you call this function. That is why you are getting $ is undefined most likely jQuery is loaded after this code is run – Enjayy May 19 '16 at 23:42