I'm looking for a way to animate the opening of a div so that it adjusts to the size of its content. The content is fetched from a separate search using .load, which means it could be just a single line (no result) or multiple results that vary in height. I've read through numerous posts and tried different approaches, but haven't had any success so far.
My latest approach involves starting the animation with a small initial height so that it looks like the div is opening, then setting the height to auto so it expands to the final size. However, this method only animates the first part and doesn't adjust the height as intended. Here's an excerpt from my document ready function:
$( "#TwoSearch" ).click(function() {
$("#div1").animate({ height:0 }, 500).empty(); <!--- close div 1 --->
$("#div2").animate({ height:200 }, 500);
SW=document.getElementById("SearchWords").value;
$("#div2").load("TwoSearchExercise.cfm?SW=" + encodeURI(SW), function () {
$('.js-lazyYT').lazyYT();
$("#div2").css('height','auto');
});
});
Is there a more elegant solution to achieve this effect? I've attempted to retrieve the height from inside the div, but it doesn't seem to work.
PS: This is a ColdFusion app, so please disregard the ## notation.