Can someone help me figure out why setting the height to "auto" in the code snippet below isn't working as expected? I want the DIV to adjust its size based on the content, but it's not happening. Any ideas on how to fix this issue would be greatly appreciated.
JavaScript Code:
$("a").click(function () {
var page = $(this).data("page");
if ($('div:animated').id != page) {
var active = $(".fold.active");
// Check if there is already a visible fold element on the page
if (active.length) {
active.animate({
width: "0"
}, 200)
.animate({
height: "0"
}, 200, function () {
$(this).removeClass("active");
})
}
if (active.attr("id") != page) {
$("#" + page)
.addClass("active")
.animate({
height: "auto"
}, 1000, 'linear')
.animate({
width: "200px"
}, 400, 'linear')
}
}
});