How do I decrease a height of a div onclick?

Question

I am using the following to increase the height of a div on click but I need the height to rever to original if the link is clicked again.

CODE:

$(document).ready(function() {
    $('.anchor_clicker').click(function(){
    $('#increaseth_the_height').animate({height:'930'})
})
    });

@hjpotter92 Is that still valid? According to the [documentation for toggle](http://api.jquery.com/toggle/) it does not accept those parameters? According to [this documentation](http://api.jquery.com/toggle-event/) it is deprecated. — Precastic, Jun 24 '13 at 20:18

score 1 · Accepted Answer · answered Jun 24 '13 at 20:15

Try storing it against the element & toggling based on that. This assumes you only have 1 element with the .anchor_clicker class:

$(document).ready(function() {
  $('.anchor_clicker').click(function(){
    if( $('.anchor_clicker').data('stored-height') == 930 ) {
      $('.anchor_clicker').data('stored-height','100');
      $('#increaseth_the_height').animate({height:'100'})
    } else {
      $('.anchor_clicker').data('stored-height','930');
      $('#increaseth_the_height').animate({height:'930'})
    }
  })
});

score 1 · Answer 2 · answered Jun 24 '13 at 20:15

Something like this:

var isExpanded=false;
$(document).ready(function() {
    $('.anchor_clicker').click(function(){
    if(isExpanded==false)
    {
         $('#increaseth_the_height').animate({height:'930'})
         isExpanded=true
    } else
    {
         $('#increaseth_the_height').animate({height:'ORIGANAL'})
         isExpanded=false
    }
})
    });

score 1 · Answer 3 · answered Jun 24 '13 at 20:15

One way to do it would be to remember the "clicked" state and do a if to determine whether to shrink or grow the div...

$(document).ready(function() {
    var clicked = 0;
    $('.anchor_clicker').click(function(){
        if(clicked === 0){
             $('#increaseth_the_height').animate({height:'930'})
             clicked = 1;
        }
        else {
            $('#increaseth_the_height').animate({height:'300'}) //or whatever the orig height was
            clicked = 0;   
        }
    })
});

PlantTheIdea · Answer 4 · 2013-06-24T20:24:39.097

I'll add one, just to have the efficiency argument in there:

$(function(){
    function animateHeight($item,ht,spd){
        $item.stop().animate({height:ht},spd);
    }

    $("#topbar-show").click(function(){
        $(this).toggle(function(){
            animateHeight($(this),40,200);
        },function(){
            animateHeight($(this),10,200);
        });
    });
});

I added the .stop() method to prevent queuing of animation, and made a function out of the animation, which allows the flexibility to use the animation on as many objects as you like.

If the .toggle() function isn't to your liking, you could always use a class instead:

$(function(){
    function animateHeight($item,ht,spd){
        $item.stop().animate({height:ht},spd);
    }

    $("#topbar-show").click(function(){
        if($(this).hasClass('clicked')){            
            $(this).removeClass('clicked');
            animateHeight($(this),10,200);
        } else {                  
            $(this).addClass('clicked');      
            animateHeight($(this),40,200);
        }
    });
});

I personally prefer the class method, but to each their own.

This way of calling toggle() is deprecated as of 1.8 & does not exist in 1.9+ [See here](http://api.jquery.com/toggle-event/) — Precastic, Jun 24 '13 at 20:26
yeah i didnt know which version he was using. i added the class-based method, which i also made clear i preferred. — PlantTheIdea, Jun 24 '13 at 20:43

How do I decrease a height of a div onclick?

4 Answers4