JQuery :: Using ToggleClass To Resize Content Box

ok so Im trying to make an expanding content box. The only thing that changes from the 2 classes is height in the css but for some reason toggleclass fails to workevery timeI set the height in the first class. Here is my code.

CSS:
#effect {
position: relative;
margin-left: 5%;
width: 600px;
height: 20px;
letter-spacing: 0;
font-size: 1.2em;
border: 1px solid #000;
overflow:hidden;
} .toggExpand {
letter-spacing: .4em;
width: 600px;
height: 400px;
margin-left:5%;
overflow:hidden;
} #button {
text-decoration: none;}
jquery
<script type="text/javascript">
$(function() {
$( "#button" ).click(function() {
$( "#effect" ).toggleClass( "toggExpand", "slow" );
return false;
});
});
</script>