When clicking button, increase or decrease height of a div

Question

When clicking button, increase or decrease height of a div

Navigation

#1 by (7 votes)

3

I created a button inside a div ( #divteste ) and I would like that when I clicked the button this ( #divteste ) would increase height and clicking the button again would decrease height and if you can use a move or animate.

javascript css

asked by anonymous 03.12.2016 / 00:51

1 answer

Email HTML 5 still needs to be done within tables? Lighter and more stable alternative to Android Studio [closed]

score 7 · Accepted Answer

Try the animate like this

$('#seuBotao').on('click', function(){
    if($('.sua-div').height() == 30){
         $('.sua-div').animate({"height" : "200px"}, 200);
    }else{
        $('.sua-div').animate({"height" : "30px"}, 200);
    }
});

Where 200 would be the time in milliseconds for the animation; You can also create adding classes:

 $('#seuBotao').on('click', function(){
        if($('.sua-div').hasClass('pequena')){
             $('.sua-div').animate({"height" : "200px"}, 200);
             $('.sua-div').removeClass('pequena');
             $(this).attr('value', 'Diminuir');
        }else{
            $('.sua-div').animate({"height" : "30px"}, 200);
            $('.sua-div').addClass('pequena');
            $(this).attr('value', 'Aumentar');
        }
    });