Animate Height

The most annoying part of developing a website is the lack of an ability to animate from height:0 to height:auto so I created a quick plugin to get this to be able to work. It works by wrapping the content of the element provided in a div, and then setting the element’s max-height to the height of the new wrapped div. You can then add css transition to the element directly in your css or in the javascript.

Note

To prevent any flicker of style due to the javascript adding inline style, I would recommend setting overflow:hidden, and if it starts closed, max-height:0.

Click to Toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rhoncus lobortis viverra. Morbi non elit scelerisque, maximus ipsum ut, accumsan leo. Suspendisse ut tincidunt nunc. Donec nunc nisl, cursus et dictum vitae, elementum ut purus. Morbi vehicula quam id risus sodales, volutpat rutrum massa consectetur. Sed dapibus bibendum bibendum.

$(document).ready(function(){
    $('.animateHeightCont').each(function (index, value) { 
        var aniHeight = new animateHeight({ el : this });
        $( this ).prev().click(function() {
            aniHeight.toggle();
        });
    });
});

Here are the default option settings

  • el : null
  • open : false
  • class : “”
  • animationTiming : null
  • animationEasing : null

Options

el

This option is required. The javascript object you want the effect attached to.

open

This will define if the object starts open.

class

This will add a class to the div that wraps the your content.

animationTiming

Defines the animation speed in milliseconds.

animationEasing

Defines the animation easing, only css easings are allowed.

Methods

.open()

This will run the animation to open the container.

.close()

This will run the animation to close the container.

.toggle()

This will run the animation to toggle the container between open and closed.