Mootools Accordion

Hi,

I am having a problem with displaying tables in accordion.

The html for this is:

<h2 class="accToggler">Current UK Loads</h2>
			<p class="accContent">
	          <table width="100%" border="0" cellspacing="0" cellpadding="2">
                <tr>
                  <td width="50%"><strong>From:</strong></td>
                  <td width="50%"><strong>Date:</strong></td>
                </tr>
                <tr>
                  <td class="left-border">Gainsborough</td>
                  <td class="left-border">26/10/2007</td>
                </tr>
                <tr>
                  <td class="left-border">Ireland</td>
                  <td class="left-border">22/11/2007</td>
                </tr>
                <tr>
                  <td class="left-border">Blackpool</td>
                  <td class="left-border">18/10/2007</td>
                </tr>
                <tr>
                  <td class="left-border">London</td>
                  <td class="left-border">09/09/2007</td>
                </tr>
                <tr>
                  <td class="left-border">Leeds</td>
                  <td class="left-border">16/10/2007</td>
                </tr>
              </table>
	          </p>
	

Code (markup):

JS

var accordion;
var accordionTogglers;
var accordionContents;

window.onload = function() {
	accordionTogglers = document.getElementsByClassName('accToggler');
	accordionContents = document.getElementsByClassName('accContent');
	accordion = new Fx.Accordion(accordionTogglers, accordionContents);
}

Code (markup):

CSS

.accToggler{
	margin: 3px auto;
	padding: 3px;
	width: 184px;
	background-image:url(../../images/index_12.jpg);
	color: #f4f4f4;
	
	cursor: pointer;
}
.accContent{
	margin: 0px auto;
	width: 184px;
	background-color:#FFFFCC;
}

Code (markup):

The problem is that in IE this works fine but in firefox it just displays the items without the mootools effect.