css transition effect not working on click?

Question

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

Just saying, What about the jQuery slideToggle() animation?! http://api.jquery.com/slideToggle/ — bingorabbit, Apr 22 '14 at 06:17
[The HTML5 placeholder attribute is not a substitute for the label element](http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/) — Quentin, Apr 22 '14 at 06:18
possible duplicate of [CSS transition height: 0; to height: auto;](http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto) — Quentin, Apr 22 '14 at 06:19

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

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?

edited May 23 '17 at 12:05

Community

1
1

answered Apr 22 '14 at 06:16

David Hedlund

128,221
31
203
222

score 0 · Answer 2 · answered Apr 22 '14 at 06:16

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;
}

score 0 · Answer 3 · answered Apr 22 '14 at 06:22

0

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);
});

answered Apr 22 '14 at 06:22

Totò

1,824
15
20

pablopixel · Answer 4 · 2014-04-22T06:43:35.610

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

score 0 · Answer 5 · answered Apr 22 '14 at 06:23

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;
}

score 0 · Accepted Answer · answered Apr 22 '14 at 06:40

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;
}

css transition effect not working on click?

6 Answers6