UI Accordion within UI Tab first Accordion not displaying.
I am having an issue with a dynamicly setup tabs and accordion's that
fit within them.
The fist tab will not properly display the accordions within it
however every tab following this seems to work fine.
Here is the script. For the example I have included an array that show
what is used to create the tabs and accorions:
Any help would be most apreciated.
<script type="text/javascript">
$(function()
{
$("#staffTabs").tabs();
});
</script>
<script type="text/javascript">
$(function()
{
<?
$o = 0;
$uploadsStaff = array('Cat1'=>
array('subCat1'=>
array('upload' => "file"),
array('subCat2'=>
array('upload' => "file")),
array('subCat3'=>
array('upload' => "file")),
),
'Cat2'=>
array('subCat1'=>
array('upload' => "file"))
);
foreach ($uploadsStaff as $groupFolder)
{
echo'$("#staffAcc'.$o.'").accordion(
{
icons:
{
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
},
alwaysOpen: true,
collapsible: true,
clearStyle: true,
active: true
});
';
$o++;
}
?>
});
</script>
<div id="staffTabs">
<ul>
<?
$count = 0;
foreach ($uploadsStaff as $group => $secondFolder)
{
$tb = "'#staffTabs-".$count."'";
echo "<li><a href=".$tb.">".$group;"</a></li>";
$count++;
}
?>
</ul>
<?php
$i= 0;
foreach ($uploadsStaff as $groupFolder)
{//groups
//debug ($groupFolder);
$tab = "'staffTabs-".$i."'";
echo "<div id=
$tab>";//////////////////////////////////////////////////////
?>
<div id="staffAcc<?echo$i;?>">
<?foreach ($groupFolder as $secondFolder => $staffUp)
{?>
<h3 class="ui-accordion-header">
<a href="#">
<?echo$secondFolder?>
</a>
</h3>
<div class="ui-accordion-content">
<span class = 'viewFiles'>
test one two three
<?foreach($staffUp as $v)
{
echo $v;
}?>
</span>
</div>
<?}?>
</div>
</div>
<?$i++;
}?>
</div>