The most basic way to resize an element is to change it's height property using a script.
element.height = pixels;
You find the element through the Document Object Model (DOM) which is just an abstraction of a document's markup into objects for something like jscript, sometimes called javascript. An example on how to do this is given within the w3schools jscript tutorial:
<html>
<head>
<script type="text/javascript">
function changeSize() {
document.getElementById("compman").height="250"
document.getElementById("compman").width="300"
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" width="107" height="98" />
<br /><br />
<input type="button" onclick="changeSize()" value="Change size of image">
</body>
</html>
If you want to do fancy transitions and animations then all you need is a bit of DOM and jscript knowledge and you can write your own. To get such fancies working smoothly on different browsers, however, you must first spend six months in a small cellar and a text editor without sunlight, food, water or soap.
Most people choose to use someone else's sweat and use a library like jQuery instead. Once you have figured out how to change somethings height in plain jscript the jQuery documentation will make a lot more sense to you. jQuery isn't your only option either. There are loads of feature rich libraries. If it's just fancy doo-dah's your looking for, scriptaculous might take your fancy.
Here's a function i once used to resize (or Morph in scriptaculous-speak) an element with the id attribute set to 'page-header':
//used to control position/animation of the page header
var POS_UP = 1;
var POS_DOWN = 2;
var POS_DURATION = 1.0;
var POS_HEIGHT = {POS_UP:"180px;", POS_DOWN:"400px;"};
//the header effect can be referred to;
header_effect = null;
//header position is used as an index for POS_HEIGHT
var header_position = POS_UP;
/**************************************
* headerScroll() *
* Morphs the header's size *
**************************************/
function headerScroll() {
header_position = (POS_UP+POS_DOWN) - header_position;
header_effect = new Effect.Morph('page-header', {style: 'height:'+POS_HEIGHT[header_position], duration: POS_DURATION });
}
This resizes the element in a very smooth transition, allowing my <div id="page-header"> to expand and reveal hidden content. All you'd need to toggle up/down would be a <a onclick="headerScroll();">Toggle Up/Down</a> and we're away.
There's so much you can do very easily once you get started. Either way, it would be best to spend some time learning jscript and the basics of the HTML DOM before plunging in.