Automatically change active tab? - php

Question

The following displays several tabs with UnitName labels. When an associated tab is clicked it causes a table associated with that tab to be displayed (javascript).
How would I change this so a particular UnitName is treated as the active one and display the associated table automatically as opposed to have to click the desired UnitName tab first?
foreach($unit_list as $unit)
{
echo '<li>'.$unit['UnitName'].'</li>';
}?>
//the following doesn't happen until the javascript knows which tab is active
<div class="tab-content">
<?php $j=0;$i=0;
foreach($unit_list as $unit)
{?>
<div class="tab-pane" id="unit<?php echo $j;?>">
<ul class="nav nav-tabs tab-color" id="deptTabs">
<?php $userDept = 0; $k=$i; foreach($dept_list[$j] as $dept)
{?>
<li
<?php
if($dept['Department']==$user_info[0]['Department'])
{
$userDept=$i;
echo "class=\"active\"";
}?>
>
<a href="#dept
<?php echo $i;?>
" data-toggle="tab">
<?php echo $dept['Description'];?></a></li>
<?php $i++;
}
$i=$k #put i back to the value it started at?>
</ul>

Answer 1

Just use .trigger() with jquery.
$(document).ready(function(){
$('#dept_tabs li').each(function(i,v){
if(i.hasClass('active')){
i.trigger('click');
}
});
});
This will loop through all the li elements, find the one thats active,
And trigger a 'click' event on it.
This is assuming that you have a predefined 'click' event assigned to these tabs.
Ie...
$('#deptTabs li').click(function(){
// Show table here based on which tab was clicked
});