Problem with Accordion in Tabs in IE

Problem with Accordion in Tabs in IE


I am constructing a front page news feed using 3 accordians stored in
tabs. When you select each tab it loads a different accordian. In
firefox this is fine. However, when you run it in IE, the tab that it
loads with works fine, but the the other tabs, when clicked, do not
have accordion functionality. It is like accordion loads on each tab
call in FF but doesn't bother in IE. I was thinking about getting a
function to call an accordion each time the corresponding tab is
selected, but being a noob have no idea how to go about this
correctly. Code is as follow, apologies for the length!:
<script type="text/javascript">
$(document).ready(function() {
    $('#mainmenu > ul').tabs({ fx: {opacity: 'toggle'} }).tabs('rotate',
6000);
    $("#accordionNews").accordion({event: 'mouseover', header: ".ui-
accordion-header", clearStyle: true});
    $("#accordionEvents").accordion({event: 'mouseover', header: ".ui-
accordion-header", clearStyle: true});
    $("#accordionOpportunities").accordion({event: 'mouseover', header:
".ui-accordion-header", clearStyle: true});
});
</script>
<div id="mainmenu">
<ul>
<li><a href="#News"><span>News</span></a></li>
<li><a href="#Events"><span>Events</span></a></li>
<li><a href="#Opportunities"><span>Opportunities</span></a></li>
</ul>
<div id="News">
<table border="0" width="100%">
<tr>
<th scope="col" rowspan="2" width="200px"><img src=""
width="183" height="183" alt="New Ambassador Social Networking Site" /