show content when tab is clicked. Please Help!

pg_lhelton

I am using jquery ui as well as datatables. there are 3 tables each on a different tab. When the page loads the first tab is selected and the datatable for that tab is shown. when I click another tab, that tab get highlighted but the content is still the datatable from the first tab. here is the script code i am using the:

$("#tabs3").tabs( {
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}



$('#tabs3 div').hide(); // Hide all divs
$('#tabs3 div:first').show(); // Show the first div
$('#tabs3 ul li:first').addClass('selected'); // Set the class of the first link to active

$('#tabs3 ul li').click(function(){ //When any link is clicked
$('#tabs3 ul li').removeClass('ui-tabs-dselecte'); // Remove active class from all links
$(this).addClass('selected'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#tabs3 div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});


the first section is straight from http://www.datatables.net/release-datatables/examples/api/tabs_and_scrolling.html and from my research should be doing the work for showing and hiding the tabs as necessary, but without the second part of code all three datatables are displayed below each other.

any help would be much appreciated! thank you!