Can not switch between the height: 0 and max-height: 500px;

advertisements

I understand it is not possible to transition between 0 and auto heights, and the solution presented is to use max-height at a value greater than the box would ever be in order to make the box grow to the correct height to contain all it's elements.

However, when I try to add a transition between height:0; and max-height:500px I get no transition.

I've tried again with simply height:0; and height:500px which should be transitionable, but it doesn't seem to be.

How can I transition height? is it not possible?

JSFiddle https://jsfiddle.net/tzgevx8e/

HTML

<div class="menu-icon">click me</div>
<div id="contact-form" class="closed">
    <h1>test</h1>
    <p>lorem ipsum dolor sit amet</p>
</div>

jQuery

$(document).ready(function(){
            $('.menu-icon').click(function(){
                $('.menu-icon').addClass('active');
                var form_status = $('#contact-form').attr('class');
                if (form_status == 'closed'){
                    openFooter();
                }else{
                    closeFooter();
                }
            });

            function openFooter(){
                $('#contact-form').removeClass('closed');
            }

            function closeFooter(){
                $('#contact-form').addClass('closed');
                $('.menu-icon').removeClass('active');
            }
        });

CSS

#contact-form.closed{display:none;height: 0px;overflow: hidden;transition:all 0.5s ease-in;}
#contact-form{display:block;height:200px;overflow:hidden;transition:all 0.5s ease-in;background-color:#2e263d;color:#fff;padding:20px 0 40px 0;}


Here you go...your CSS was out of whack.

Fiddle https://jsfiddle.net/tzgevx8e/3/

CSS

#contact-form  {
    overflow:hidden;
    height:0px;
    transition:all 0.5s ease-in;
}
#contact-form.open {
    height:200px;
    background-color:#2e263d;
    color:#fff;
    padding:20px 0 40px 0;
}

JQuery

$('.menu-icon').click(function(){
    $(this).toggleClass('active');
    $('#contact-form').toggleClass('open');
});