I want to create a div like below:
<div id="upButton"> </div>
<div id="divWithExcessiveContent" style="overflow: hidden; height: 20px;">
content number 1<br/>
content number 2<br/>
content number 3<br/>
content number 4<br/>
...
content number 100<br/>
</div>
<div id="downButton"> </div>
Based on the code above, #divWithExcessiveContent
's content should only be until, perhaps "content number 20"
and the rest are hidden. When #downButton
is clicked, the inside of the div
should scroll down, displaying the content below "content number 20"
.
How can I do that using jQuery?