Problem with Accordions within Tabs in IE
I have used the jquery tabs solution to display three tabs. Each tab
contains an accordion. Each accordion is a separate instance
of .accordion(). In firefox everything works fine. However, when I
load it in IE the first page to be displayed has a working accordion.
If I change tab the accordion attached to the other tabs fail to
work. My code is as follow:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui-
personalized-1.6rc2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mainmenu > ul').tabs({ fx: {opacity: 'toggle'} }).tabs('rotate',
10000);
$("#accordion").accordion({event: 'mouseover', header: ".ui-accordion-
header", clearStyle: true});
$("#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" /