jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};

jQuery(document).ready(function() {
  jQuery('#fade').click(function() {
    jQuery(this).next().fadeToggle('slow');
  });
  
});


jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
};

jQuery(document).ready(function() {
  jQuery('#slide-fade').click(function() {
    jQuery(this).next().slideFadeToggle('slow', function() {
      var $this = jQuery(this);
      if ($this.is(':hidden')) {
        $this.text('Successfully closed.');
      } else {
        $this.text('Sucessfully opened.');
      }
    });
  });
  
});

jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
  return this.animate({marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h}, speed, easing, callback);  
};

jQuery(document).ready(function() {
    /* wrap with div element having 'display: hidden' so when
      the internal div slides it 'disappears' */
    
    var $box = jQuery('#box')
    .wrap('<div id="box-outer"></div>');
        
    // dynamically calculate the element's height so we can set it to an initial 'hidden' position
        
    var h = jQuery($box).height() + parseInt(jQuery($box).css('paddingTop')) + parseInt(jQuery($box).css('paddingBottom'));
    jQuery($box).css("margin-top", "-" + h + 40 + "px");
    
    jQuery('#blind').click(function() {
        $box.blindToggle('slow');
    });
});