I am very new to jquery plugin development. I am trying build a very simple plugin that toggle the height of a div, and am trying to use jquery boilerplate starter code. I think I have it all set up correctly so far, but can't seem to set the initial size of the container I am trying to toggle later. Line 27 is giving me the following error:
TypeError: 'undefined' is not a function (evaluating 'this.element.css({ height: 100 })')
I don't understand what this means yet.
Thank you for any help with this!
- ;(function ( $, window, document, undefined ) {
- // Create the defaults once
- var pluginName = 'toggleItem',
- defaults = {
- closeHeight: 50,
- openHeight: 200,
- toggleBtn: '.toggle-btn'
- };
- // The actual plugin constructor
- function ToggleItem( element, options ) {
- this.element = element;
- this.options = $.extend( {}, defaults, options) ;
-
- this._defaults = defaults;
- this._name = pluginName;
-
- this.init();
- }
- ToggleItem.prototype.init = function () {
- console.log('this.element is: ' + this.options.closeHeight);
- this.element.css({ height: this.options.closeHeight });
- };
- $.fn[pluginName] = function ( options ) {
- return this.each(function () {
- if (!$.data(this, 'plugin_' + pluginName)) {
- $.data(this, 'plugin_' + pluginName,
- new ToggleItem( this, options ));
- }
- });
- }
- })( jQuery, window, document );