Init function question.

Init function question.

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!


  1. ;(function ( $, window, document, undefined ) {

  2.     // Create the defaults once
  3.     var pluginName = 'toggleItem',
  4.         defaults = {
  5.             closeHeight: 50,
  6.             openHeight: 200,
  7.             toggleBtn: '.toggle-btn'
  8.         };

  9.     // The actual plugin constructor
  10.     function ToggleItem( element, options ) {
  11.         this.element = element;

  12.         this.options = $.extend( {}, defaults, options) ;
  13.         
  14.         this._defaults = defaults;
  15.         this._name = pluginName;
  16.         
  17.         this.init();
  18.     }

  19.     ToggleItem.prototype.init = function () {

  20.         console.log('this.element is: ' + this.options.closeHeight);

  21.         this.element.css({ height: this.options.closeHeight });
  22.     };

  23.     $.fn[pluginName] = function ( options ) {
  24.         return this.each(function () {
  25.             if (!$.data(this, 'plugin_' + pluginName)) {
  26.                 $.data(this, 'plugin_' + pluginName, 
  27.                 new ToggleItem( this, options ));
  28.             }
  29.         });
  30.     }

  31. })( jQuery, window, document );