Spry.Effect.Slide - cannot set initial state.

Question

I have 3 div elements using the Spry.Effect.Slide effect. I
use CSS to close 2 elements and leave 1 element open. It works fine
in Firefox. But in IE7 when the hidden elements slide down to show,
its still display of none!! In firefox, the elements are displayed
fine when the slide effect is started. Below is my code.
Is there another simple approach that will work in IE7?
<style>
#menuGroupAboutCompany { display:none; }
#menuGroupAboutProducts {}
#menuGroupMoreMatchpoint { display:none; }
</style>
<script type="text/javascript">
var menuGroupAboutCompany_toggle = new
Spry.Effect.Slide('menuGroupAboutCompany', {duration:500, from:
'0%', to: '100%', toggle:true,
setup:menuGroupInit('menuGroupAboutCompany') });
var menuGroupAboutProducts_toggle = new
Spry.Effect.Slide('menuGroupAboutProducts', {duration:500,
toggle:true});
var menuGroupMoreMatchpoint_toggle = new
Spry.Effect.Slide('menuGroupMoreMatchpoint', {duration:500, from:
'0%', to: '100%', toggle:true, setup:menuGroupInit});
</script>

Answer 1

Sorry, previous code posting had some other code I was
experimenting with. This is the current code that works in Firefox.
<style>
#menuGroupAboutCompany { display:none; }
#menuGroupAboutProducts {}
#menuGroupMoreMatchpoint { display:none; }
</style>
<script type="text/javascript">
var menuGroupAboutCompany_toggle = new
Spry.Effect.Slide('menuGroupAboutCompany', {duration:500, from:
'0%', to: '100%', toggle:true});
var menuGroupAboutProducts_toggle = new
Spry.Effect.Slide('menuGroupAboutProducts', {duration:500,
toggle:true});
var menuGroupMoreMatchpoint_toggle = new
Spry.Effect.Slide('menuGroupMoreMatchpoint', {duration:500, from:
'0%', to: '100%', toggle:true});
</script>