jQuery Animate to Auto Height and back

Question

There is a list of elements and I need to expand it on click on the first element and then roll up to previous height (on the click on the first element too).

var $body = $('body');
	
	function languagesListDropdown() {
		$body.on('click', '#language li a.chosen', function (e) {
			var $languagesList = $('#language');
			
			if (!$languagesList.hasClass('opened')) {
				var curHeight = $languagesList.height();
				$languagesList.css('height', 'auto');
				var autoHeight = $languagesList.height();
				$languagesList.height(curHeight).animate({height: autoHeight}, 300, function(){
					$(this).addClass('opened');
				});
			} else {
			}
			
			
			return false;
		});
	}
	
	languagesListDropdown();

.language {
  position: absolute;
  top: 20px;
  left: 10px;
  width: 60px;
  height: 32px;
  overflow: hidden;
  border: 2px solid #f6e8d9;
}

.language:after {
  position: absolute;
  top: 12px;
  right: 7px;
  width: 0;
  height: 0;
  cursor: pointer;
  border-color: #636264 transparent transparent transparent;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  content: '';
}

.language > li {
  width: 100%;
  height: 28px;
}

.language > li a {
  display: block;
  height: 28px;
  padding: 7px 20px 0 8px;
  overflow: hidden;
  color: #636264;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="language" id="language">
					<li>
						<a href="#" class="chosen">es</a>
					</li>
					<li>
						<a href="#">en</a>
					</li>
					<li>
						<a href="#">fr</a>
					</li>
					<li>
						<a href="#">lat</a>
					</li>
				</ul>

My function expands the list, but I don't know how to roll up it to the previous height?

Answer 1

One problem with JavaScript or CSS transitions is that, height: auto or width: auto cannot be animated! So you can do one thing:

$languagesList.css('height', 'auto');
$languagesList.css('height', $languagesList.height());

This will compute the auto height of the element. You can make use of this in the animation, by either storing them inside the .data() object or using a variable.

Your final code will be:

var $body = $('body');

$('#language').data("orig-height", $('#language').height())

function languagesListDropdown() {
    $body.on('click', '#language li a.chosen', function (e) {
        var $languagesList = $('#language');

        if (!$languagesList.hasClass('opened')) {
            var curHeight = $languagesList.height();
            $languagesList.css('height', 'auto');
            var autoHeight = $languagesList.height();
            $languagesList.height(curHeight).animate({
                height: autoHeight
            }, 300, function () {
                $(this).addClass('opened');
            });
        } else {
            var curHeight = $languagesList.height();
            orig_height = $('#language').data("orig-height");
            $languagesList.height(curHeight).animate({
                height: orig_height
            }, 300, function () {
                $(this).removeClass('opened');
            });
        }
        return false;
    });
}

languagesListDropdown();

Fiddle: http://jsfiddle.net/mgLvz8sw/

Answer 2

Quick and dirty, but you can store the original height in a variable and reference it.

var $body = $('body');
var original_height = $('#language').height();
function languagesListDropdown() {
    $body.on('click', '#language li a.chosen', function (e) {
        var $languagesList = $('#language');
        var curHeight = $languagesList.height();
        if (!$languagesList.hasClass('opened')) {
            $languagesList.css('height', 'auto');
            var autoHeight = $languagesList.height();
            $languagesList.height(curHeight).animate({height: autoHeight}, 300, function(){
                $(this).addClass('opened');
            });
        } else {
            $languagesList.height(curHeight).animate({height: original_height}, 300, function(){
                $(this).removeClass('opened');
            });
        }


        return false;
    });
}

languagesListDropdown();