CODEWITHSUNDEEP
jqueryhtmlcss
Orahmax
Orahmax

Reputation: 2341

css transition effect not working on click?

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

Upvotes: 0

Views: 1131

Answers (6)

pablopixel
pablopixel

Reputation: 819

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

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11496

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

Upvotes: 0

bingorabbit
bingorabbit

Reputation: 695

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

Upvotes: 0

Tot&#242;
Tot&#242;

Reputation: 1854

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

Upvotes: 0

Godinall
Godinall

Reputation: 2290

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

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129822

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?

Upvotes: 1

Related Questions