Jquery SlideUp Height

Question

$(document).ready(function() {
    $('#arrow').click(function () {
        if ($('#slide1').is(":hidden")) {
            $('#slide1').slideDown('medium');
        } else {
            $('#slide1').slideUp('normal');   
        }
    });
});

how can I mention the slideup height alone?

Answer 1

 $('#arrow').click(function () {
      if ($('#slide1').hasClass("small")) {
         $('#slide1').animate({"height": "40px"}, "medium").removeClass("small"); 
      } else {

            $('#slide1').animate({"height": "20px"}, "medium").addClass("small");
      }
  });

You can use the animate method to change the height. And hasClass method to check the condition of the div(is it in the original size or not). Here I have added a class 'small' to indicate the reduced height state.

click here for the jsfiddle

Answer 2

use animate()

$(document).ready(function() {
  $('#arrow').click(function () {
      if ($('#slide1').is(":hidden")) {
       $('#slide1').animate({"height": "100px"}, "medium");
      } else {
       $('#slide1').animate({"height": "0px"}, "medium");;   
      }
  });
});

have a look to toggle() (though deprecated and removed in jq 1.9),fadeToggle()