Css transition height does not work using javascript

Question

So here is the problem i want to make a dropdown for my website using javascript but the transition of height doesn't work , when i click the on the div i made it doesnt transition well it works it sets the height to auto and it shows a way but the problem is it doesnt transition so its not smooth , it just pop out. please help and thank you in advance mates.

Here are the codes:

the HTML

<h1 id="btnh" onClick="show_about('aboutcr')">about</h1>

<div id="aboutcr">
    <div id="pcontcr">
        <p id="p2r">"Hey guys my name is <span>Vincent Nocum</span> and welcome to my project     website. I'm a 17yrs old student taking up <span>Information Technology Course in Lyceum of The Philippines Laguna</span>, The purpose of this website is for my project in <span>Communication Arts II</span> lead by our professor <span>Ms.Lenie De Leon</span>. I post some topic on this website held by our professor. So its concluded that this website is only for educational purposes only"</p>
    </div>
</div>

this is the css

    #aboutcr{
        display: inline-block;
        background:white;
        width: 100%;
        text-align: justify;
        overflow: hidden;
        height: 0px;
        transition: height .5s;
        -webkit-transition: height .5s;
        -moz-transition: height .5s;
        -ms-transition: height .5s;
        -o-transition: height .5s;
    }

    #btnh {
        width: 100%;
        margin: 0 auto;
        text-align:center;
        font-family: latolight;
        /*text-transform: capitalize;*/
        font-size: 25px;
        padding-top: 2%;
        padding-bottom: 2%;
        color: #9bcf40;
        border-bottom: 1px solid;
        border-color: #9bcf40;
        margin-top: -4px;
        background: -webkit-linear-gradient(#f4f4f4, #f1f1f1 );
        background: -moz-linear-gradient(#f4f4f4, #f1f1f1 );
        background: -ms-linear-gradient(#f4f4f4, #f1f1f1 );
        background: -o-linear-gradient(#f4f4f4, #f1f1f1 );
        background: linear-gradient(#f4f4f4, #f1f1f1 );
    }

And here is the javascript:

        function show_about(x){
        var about = document.getElementById(x), h = "auto";
        // or 
        // var menu = this.children[0];  

        if(about.style.height == h){
            about.style.height = "0px";
        }else{
            about.style.height = h;         
        }
    }

i think the transition will not work with `auto`. try % or px values. — gp., Sep 14 '14 at 05:30
Classic solution to this problem is to transition on `max-height`. — , Sep 14 '14 at 05:47
See also http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto. — , Sep 14 '14 at 07:16

score 0 · Answer 1 · answered Sep 14 '14 at 05:59

From MDN:

Also the auto value is often a very complex case. The specification asks not to animate from and to such a value. Some user agents, like those based on Gecko, implement this requirement and others, like those based on WebKit, are less strict. Using animations with auto may lead to unpredictable results, depending of the browser and its version, and should be avoided.

Css transition height does not work using javascript

1 Answers1