I wrote a simple function for a Scriptaculous & Prototype accordion. Problem is...it doesn't slide smoothly. I've tried just about everything I can think of. Removed Parallel effects, padding on elements, etc...

Here is my code :
Code javascript:
<script type="text/javascript">
function accordion(el, panel, panelBody) {
	var apanels = document.getElementsByClassName(panel, el.parentNode.parentNode);
 
	for (var i = 0; i < apanels.length; i++) {		
		if (Element.hasClassName(apanels[i].id + '-body', 'visible')) {
			var elUp = apanels[i].id + '-body';
			Element.removeClassName(elUp, 'visible');
			new Effect.Parallel([new Effect.BlindUp(elUp), new Effect.Fade(elUp)]);
		}
	}
 
	var elDown = el.id + '-body';
	new Effect.Parallel([new Effect.BlindDown(elDown), new Effect.Appear(elDown)]);
	Element.addClassName(elDown, 'visible');
}
</script>

The content from which the accordion function is called looks something like this :

Code html:
<dl id="panel">
    <dt><a href="#void" id="panel1" class="panel" onclick="accordion(this, 'panel', 'panel-body');">
        <dd style="display:none;" class="panel-body" id="panel1-body">
            content here...
        </dd>
    </dt>
    <dt><a href="#void" id="panel2" class="panel" onclick="accordion(this, 'panel', 'panel-body');">
        <dd style="display:none;" class="panel-body" id="panel2-body">
            content here...
        </dd>
    </dt>
</dl>

Do you have any idea why it would cause this?
I can post a URL to the page if needed.
I'm using this same accordion function on another site without problems.

Thanks for your help