html – Animate div’s height with nested divs

Here is the snippet:

I have a horizontally shaped div #cleaning_card_1, which has embedded divs which act like borders and vertical div #cleaning_card_right_1 with a nested div #cleaning_card_right_content_1. Inside the last div I have multiple divs which amount is dynamic. What I want to achieve is #cleaning_card_right_1 acting like a dropdown menu. I have a simple function to achieve that:

function maximizeCleaningCard () {

    var cleaning_card_number = $(this).attr('number')

    $(this).animate({width: '97%'}, 200, function () {
        $('#cleaning_card_right_' + cleaning_card_number).removeClass('cleaning_card_right').addClass('cleaning_card_right_maximized')
        $('#cleaning_card_right_' + cleaning_card_number).animate({height: 400}, 400)
        $('#cleaning_card_right_content_' + cleaning_card_number).animate({height: 400 - 80}, 400)
        $('#cleaning_card_right_left_border_1, #cleaning_card_right_right_border_1').animate({height: 400 - 80}, 400)



Animation is properly run on #cleaning_card_1 and border divs, however the #cleaning_card_right_content_1 is not animated at all. It just pops up there and thats it. If I’ll remove nested items out of it, animation will properly work. I think that the problem is that div’s height is not equal to 0 due to nested elements, but most likely I am mistaken. How to overcome this issue?