css transition effect not working on click?

Problem

I am trying to apply CSS3 transition effect on a form expansion when its heading is clicked but it isn't working

HTML:

<section class="widget" id="widget-1">
    <h4>Contact Us</h4>
    <form class="contact-form collapse" role="form">
        <input type="text" class="form-control" placeholder="Name">
        <input type="text" class="form-control" placeholder="Email">
        <input type="text" class="form-control" placeholder="Phone Number">
        <textarea class="form-control" placeholder="Question"></textarea>
        <button type="submit">Submit</button>
    </form>
</section><!-- widget-1 -->

CSS

#widget-1 h4{
    cursor: pointer;
}
#widget-1 form.collapse{
    height: 0px;
}
#widget-1 .contact-form{
    overflow: hidden;
    height:auto;
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    -moz-transition:all 0.9s linear 0.5s;
    -ms-transition:all 0.9s linear;
    -o-transition:all 0.9s linear;
}

Jquery

$('#widget-1 h4').click(function(){
        $('.contact-form').toggleClass('collapse');
    });

JSBIN

Problem courtesy of: Orahmax

Solution

Demo

js

$('#widget-1 h4').click(function () {
    if ($('#widget-1 form').is(":hidden")) {
        $('.contact-form').slideDown('slow');
    } else {
        $('#widget-1 form').slideUp('slow');
    }
});

css

#widget-1 h4 {
    cursor: pointer;
}
#widget-1 form {
    display:none;
}
Solution courtesy of: 4dgaurav

Discussion

Transitioning over height: auto will not work. A workaround is to transition max-height from 0 to something that will never be an actual boundary of the box, as per this answer: How can I transition height: 0; to height: auto; using CSS?

Discussion courtesy of: David Hedlund

Change your css like below:

#widget-1 .contact-form{
    overflow: hidden;
    height:100px; //Change this
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    -moz-transition:all 0.9s linear 0.5s;
    -ms-transition:all 0.9s linear;
    -o-transition:all 0.9s linear;
}
Discussion courtesy of: Godinall

I can suggest to change your css to

#widget-1 form.collapse{
    display: none;  
}

and do the transition with jQuery:

$('#widget-1 h4').click(function(){
    $('.contact-form').toggle(900);
});
Discussion courtesy of: Totò

The transition will never run, because the .contact-form class is always applied to the element and the state never changes. You're using jQuery, so you can use its .slideToggle() function and get rid of the CSS transition, like this: http://jsbin.com/papudizi/2/edit

$('#widget-1 h4').click(function(){
    $('.contact-form').slideToggle();
});

EDIT: If you want a pure-CSS solution, you can do it on :hover instead of on click. In this case, apply the transition to the .contact-form class and the height in a new #widget-1:hover .contact-form rule, so it will be applied to the .contact-form element when the cursor is over the #widget-1 element.

#widget-1 .contact-form{
    overflow: hidden;
    height: 0px;
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    -moz-transition:all 0.9s linear 0.5s;
    -ms-transition:all 0.9s linear;
    -o-transition:all 0.9s linear;
}
#widget-1:hover .contact-form{
    height: 100px;
}

See it here: http://jsbin.com/talelufu/2/edit

Discussion courtesy of: pablopixel

Change the height defining a value, like so:

#widget-1 .contact-form{
    overflow: hidden;
    height:200px; /* Here we go */
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    -moz-transition:all 0.9s linear 0.5s;
    -ms-transition:all 0.9s linear;
    -o-transition:all 0.9s linear;
}
Discussion courtesy of: bingorabbit

This recipe can be found in it's original form on Stack Over Flow.