Accordion inside tabs?
Accordion inside tabs?
Hello,
I'm trying to implement the accordion plugin inside of tabs. This
presents a couple of issues, but the most pressing one right now is
that the accordion functionality isn't activated. Any ideas on the
best way to approach this?
Details:
I'm using ui.tabs, which are populated via Ajax. The tabs represent 3
separate sets of information regarding a system selected via another
link. The sets of information in each tab are then broken down into
packages which I would like to display using accordion.
Clicking on a link representing a system calls this function:
function doSubmit(sid){
$("#uginfo > ul").tabs('url',0,'/upgrades/autocomplete.php?s='+sid
+'&o=p&t=bfx');
$("#uginfo > ul").tabs('url',1,'/upgrades/autocomplete.php?s='+sid
+'&o=p&t=sec');
$("#uginfo > ul").tabs('url',2,'/upgrades/autocomplete.php?s='+sid
+'&o=p&t=enh');
$("#uginfo > ul").tabs('load',0);
}
The autocomplete function referenced returns HTML code containing the
appropriate div and ul elements to create the accordion like so:
print '<ul id="edata" class="ui-accordion-container">';
while($errata = mysql_fetch_object($erratas)){
print '
<li>
<div class="ui-accordion-left"></div>
<a href="#" class="ui-accordion-link">';
print $errata->package_name;
if($num_rows > 0)
print'
<div class="ui-accordion-right"></div>';
print'
</a>
<div>';
print $errata->errata_description;
print'
</div>
</li>';
}
print '</ul>';
I had tried initializing the accordion like so:
function doSubmit(sid){
$("#uginfo > ul").tabs('url',0,'/upgrades/autocomplete.php?s='+sid
+'&o=p&t=bfx');
$("#uginfo > ul").tabs('url',1,'/upgrades/autocomplete.php?s='+sid
+'&o=p&t=sec');
$("#uginfo > ul").tabs('url',2,'/upgrades/autocomplete.php?s='+sid
+'&o=p&t=enh');
$("#uginfo > ul").tabs('load',0);
$("#edata").accordion();
}
However, it appears that tab "load" is asynchronous so it completes
before the page containing the accordion code actually loads, and the $
("#edata").accordion() call does nothing. (In fact, if I run this
through firebug and wait long enough, the page DOES load, and the call
does work...)
How do I figure out when a tab "load" has finished so I can call $
("#edata").accordion() to activate the accordion?
TIA
Mark