how do i split these two Jquery functions properly?

what i am trying to do is, given the following script:

 (function($) {
  $.fn.Button_Activator = function() {
        return this.each(function() {
          var coll = document.getElementsByClassName("collapsible");
          var i;
          for (i = 0; i < coll.length; i++) {
              coll[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var content = this.nextElementSibling;
              if (content.style.maxHeight){
                content.style.maxHeight = null;
              } else {
                content.style.maxHeight = content.scrollHeight + "px";
              }
            });
          }
        });
    };
})(jQuery); // End of use strict

i am attempting to split it in two functions in two separate files, the first one being: “little_one.js”

(function ($) {
    $.fn.little_one = function (test) {
        return this.each(function (test) {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            };
        });
    };
    
})(jQuery); // End of use strict

and the second one being “Button_Activator.js”:

(function ($) {
    $.fn.Button_Activator = function () {
        return this.each(function () {
            var coll = document.getElementsByClassName("collapsible");
            var i;
            for (i = 0; i < coll.length; i++) {
                coll[i].addEventListener("click", little_one(coll[i]));
            }
        });
    };
})(jQuery); // End of use strict

now, what happens when i use the former functions is that the browser says “Uncaught ReferenceError: little_one is not defined” as well as “jquery.min.js:2 jQuery.Deferred exception: little_one is not defined ReferenceError: little_one is not defined”. Now, in the HTML i have verified that its importing little_one.js before Button_Activator.js therefore my best guess is that there is something wrong with the implementation of the split. Anyone with any input on the matter would be very appriciated.

Answer

I can see a few problems with the code snippet,

1. little_one exists on the jquery $ object, so you need to reference that

coll[i].addEventListener("click", $().little_one(coll[i]));

2. addEventListener expects a function reference as it’s second argument, but what you’re actually doing is calling the function immediately and returning the result instead, so you need to pass the function reference

coll[i].addEventListener("click", $().little_one);

3. this.each exists for jQuery elements, not for DOM elements, in general I’d advice against mixing DOM elements with jQuery elements since it’s hard to keep track of which is which.

(function ($) {
    $.fn.little_one = function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        };
    };
})(jQuery); // End of use strict

Working jsFiddle: http://jsfiddle.net/76yumo4n/