转换高度未知/动态内容高度的最佳方法？

Question

我已经看到了过时的CSS解决方案和一些过于复杂的javascript解决方案，但是我想知道最好的js和/或css3技术来实现这一目标：

1. 单击按钮'.contentToggle'，将内容加载到'.container'中。
2. 转换表示'.container'的高度从零到刚加载的内容的高度。
3. 执行此操作时不会出现抽动，闪烁，这样在切换内容加载器时，'.container'下的内容块会优雅地上下滑动。

FIDDLE

var content = '<div class="content"></div>';
var container = $('.container');
var toggler = $('.toggler');

toggler.click(function() {
  if (container.hasClass('open')) {
    container.removeClass('open');
    container.html(undefined);
    container.slideUp('slow');
  } else {
    container.addClass('open');
    container.html(content);
    container.slideDown('slow');
  }
})