Question

I have a blind function that lowers and raises a div. It works great but I want to make it so that the div will go down all the way except 30px and open all the way. How would I do this?

//* JQuery *//

    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);  
    };

$(document).ready(function() {
  var $box = $('#box')
    .wrap('<div id="box-outer"></div>');
  $('#blind').click(function() {
    $box.blindToggle('slow');
  });    
});

//* CSS *//

#box {
     padding: 10px;
     height: 100px;
     width: 100px;
     background: #e459e9;
     }
#box-outer {
     overflow: hidden;
     height: 120px;
     margin: 20px;
     }

Thanks!

Answer 1

Here why not give this a shot.

jQuery.fn.blindToggle = function(newHeight, speed, easing, callback) {
    return this.each(function(){with( jQuery(this) ){
        height() != newHeight ?
            data("wasHeight", height()).css("overflow","hidden").animate({height: newHeight}, speed, easing, callback)
        :
            css("overflow","").animate({height: data("wasHeight")}, speed, easing, callback).removeData("wasHeight")
    }})
};

$(function() {
  $('#blind').click(function() {
    $(this).blindToggle(30, "slow");
  });    
});