Blind Toggle for jQuery

jQuery has a great slide effect which comes built in to the core code. The only problem is that when an element slides down, it starts from the top and slides down to the bottom. Check out the drop down menu on Moderno to see what I mean.
I wanted to create an element that slides out from the bottom up and came across this piece of jQuery code which creates a “blind” toggle.

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

I have included it in my upcoming Premium theme Elemental Portfolio and I wanted to give props to Karl Swedberg on Learning jQuery for pointing me in the right direction.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie