Animate Height/Width To Auto with jQuery and CSS3 - cssAnimateAuto

cssAnimateAuto is an useful & powerful jQuery plugin that makes uses of CSS3 transitions to animate an Html element's Height/Width to 'auto'. With cssAnimateAuto plugin you can easily create flexible accordion menu, toggleable container or dropdown menu with animated expand/collapse effects.

Basic usage:

1. Create a collapsible container with auto height.

<div id="demo" class="content">
YOUR CONTENT GOES HERE
</div>

2. Create a button to toggle the container.

<button id="trigger">Open</button>

3. Call the plugin with all the default options.

$('#trigger').click(function() {
$('#demo').cssAnimateAuto();
});

4. Options.

$('#trigger').click(function() {
$('#demo').cssAnimateAuto({
// any CSS transition (shorthand) prop
transition: 'height 0.3s',

// or 'open' or 'close'
action: 'toggle', 

openClass: 'is-opened',
eventNamespace: 'cssaa',

// any height value
to: false 
});
});

Change logs:

v0.4.0 (2015-08-05)

• Update dependencies

v0.3.3 (2015-06-08)

• Fix-iOS6-TransitionEnd --> 3spin-dev-Fix-iOS6-TransitionEnd

v0.3.3 (2015-01-25)

• Fixed this when plugin is used in callback function.
• Fixed webkitTransition detection for iOS6

v0.2.5 (2014-01-13)

• Minor improvements, new version

---

This awesome jQuery plugin is developed by davidtheclark. For more Advanced Usages, please check the demo page or visit the official website.