Showing and hiding a DIV partially

Question

Hi, I need to hide a DIV partially, not totally. When page loads, I want it to show the first, let's say, 100 pixels sitting on the uppermost part of the div. When the user clicks a certain button, the div will open (it could be a sliding effect like jQuery's show()). When the user clicks back the same button, the div will return to its original state showing only the top 100 pixels. I am trying to figure out how to do this with jQuery because it seems to be the best way to do that. Any hints? Thank you.

Answer 1

it could be done by setting div's initial height to 100px and setting its overflow to hidden in CSS. then you can change div's height to auto when you show the full div on javascript button click.

example: http://www.quirksmode.org/css/overflow.html

CSS code:

overflow : hidden;

Answer 2

Wow, that 's a great idea. Thank you! I will try it.

Answer 3

you will need the toggle method and some animation , jquery style :

set the height of the div to 10px with Css.

$("td").toggle(
  function () {
    $(this).animate( { height:"100px" } , 1000 )
  },
  function () {
     $(this).animate( { height:"10px" } , 1000 )
  }
);

Answer 4

Thank you! Thank you! This is the first time using this community. It is so amazingly quick and dynamic! I am an instant fan. I hope I will also contribute.