I wanted to know if there was a way to expand the height of an element. for example, I have something like

1. <ul class='arclist1'>
2. <li><a><data:recent1/></a><li>
3. <li><a><data:recent2/></a><li>
4. <li><a><data:recent3/></a><li>
5. <li><a><data:arch/></a><li>
6. <ul>
   
7. <style type='text/css'> .arclist1 {max-height:400px; overflow:auto; } </style>

So when my list's hight exceeds 400px, a scrollbar appears, which doesn't look very nice. I'd like to know if there's a way to a have create an sort of an expand effect using JQuery. That is, to have the height of the element's height limited to 400px, with a 'button' to load the rest of it. I'm not asking for the final code itself, only the instructions or a tutorial page (though it'd be nice to have the final code just to compare with the one I'd attempt to to create myself).

Thank you