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.

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.

• javascript
• jquery
• html
• templating

Share Improve this question Follow asked Jan 15, 2009 at 19:04 Marcos BuarqueMarcos Buarque 3,42888 gold badges4646 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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/css/overflow.html

CSS code:

overflow : hidden;

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 )
  }
);