Reputation: 1040

jQuery add animation when change CSS height property

I hope you all are having a great day

I'd like to add animation to that piece of code. I tried using animate() . But it didn't work, maybe it's because of the lack of my knowledge in javascript.

Please tell me if it's possible with this code, or do I need to try something else? what do you suggest?

Thank you very much in advance.

Here is the HTML code:

<div id="description_wrapper">
    Text content.<br/>
    See; More Text content.
</div>

<button class="learn_more" id="lm_more" href="#">Learn more</button>

The CSS

#description_wrapper
{
    margin: 0 auto;
    margin-top: 25px;
    height: 0;
    overflow: hidden;
}

The jQuery

$('#lm_more').click(function(event){
    event.preventDefault();
    if($('#description_wrapper').css('height') > '1px') {
        $('#description_wrapper').css({'height': '0px'});
        $('#lm_more').html('Learn More');
    }
    else
    {
        $('#description_wrapper').css({'height': 'auto'});
        $('#lm_more').html('Learn less');
    }
});

View the code here http://jsfiddle.net/Gbspx/11/

Upvotes: 5

Answers (6)

Patel Disha

Reputation: 219

I have added good solution. here you can find dynamic height of content then add height with transition effect on button click and window resize event.

$(document).ready(function() {
            var divheight = document.getElementById('experience-county-toggle').offsetHeight;
            $("#experience-county-toggle").css('height', 0);
            $(".toggle-arrow-icon").click(function() {

                $(window).resize(function() {
                    $("#experience-county-toggle").removeClass('height-zero');
                    $("#experience-county-toggle").animate({
                        height: divheight
                    }, 1);
                    var $heightfirst = $('#experience-county-toggle').height();
                    if ($heightfirst > 0) {
                        $("#experience-county-toggle").addClass('height-zero');

                    }

                });
                $(window).trigger('resize');
            });

Upvotes: 1

Bilal Khoukhi

Reputation: 1040

I have found a very good solution, and I still can use auto... For me auto is very important, especially when using the button to make more than one div appear

The solution is:

$('#lm_more').click(function(event){
    event.preventDefault();
    if($('#description_wrapper').css('height') != '0px') {
        $('#description_wrapper').animate({'height': '0px'}, 1000, "easeInQuint");
        $('#lm_more').html('Learn More');
    }
    else {
        var height_div = $('#description_wrapper').css({'height': 'auto'}).height();
        $('#description_wrapper').animate({'height': height_div}, 1000, "easeInQuint");
        $('#lm_more').html('Learn less');
    }
});

I first have it to calculate the required height, then I pass it to the animate function.

Thank you all

Upvotes: 3

Cam

Reputation: 1902

This works sliding up but like the first answer you should use slidetoggle. It is a better choice. Or do addClass.

$('#lm_more').click(function(event){
    event.preventDefault();
    if($('#description_wrapper').css('height') > '1px') {
        $('#description_wrapper').animate({height : '0px'}, 1000);
        $('#lm_more').html('Learn More');
    }
    else {
        $('#description_wrapper').animate({height : '100%'},  1500);
        $('#lm_more').html('Learn less');
    }
});

Upvotes: 2

Derek Story

Reputation: 9593

You can use some CSS3 Transitions to do this very easily and smoothly. Switch your current CSS with this:

#description_wrapper
{
margin-top: 25px;
height: 0;
overflow: hidden;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}

Also, you will need to give the height a specified height instead of "auto" for the transition to take effect.

$('#lm_more').click(function(event){
event.preventDefault();
if($('#description_wrapper').css('height') > '1px') {
    $('#description_wrapper').css({'height': '0px'});
    $('#lm_more').html('Learn More');
}
else {
    $('#description_wrapper').css({'height': '200'});
    $('#lm_more').html('Learn less');
}

});

JS Fiddle

Note that this only works on browsers that support CSS3.

Upvotes: 7

NullHappens

Reputation: 425

try this:

$('#lm_more').click(function (event) {
        event.preventDefault();
        $('#description_wrapper').slideToggle('slow', function (){
            if ($('#lm_more').text() == 'Learn more') {
                $('#lm_more').text('Learn less');
            } else {
                $('#lm_more').text('Learn more');
            }
        });
    });

Upvotes: 1

Jérôme

Reputation: 2090

Take a look at .slideToggle(), I think this is what you are looking for.

Upvotes: 3

jQuery add animation when change CSS height property

Answers (6)

Related Questions