Mootools

[adamjblakey]

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>

 

JS

 

var accordion;
var accordionTogglers;
var accordionContents;

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

 

 

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;
}

 

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