jQuery tabs not working inside a thickbox

Question

Hi! I´m working on a project, where i got a site with "case studies" and the details are show within a thickbox. Now, this content is split into 3 jQuery tabs, that work just fine in a blank page, but inside this thickbox, they don´t.

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/estilos.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/functions.js" ></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>  
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js" ></script>  
<script type="text/javascript" src="js/thickbox.js" ></script>  


<div id="todos">
<div id="titCuerpo"> Case studies
</div>
<div id="cuerpo">
<a href="#" class="toggleLink"><img src="imgs/arrowDown.png" align="bottom"/>&nbsp;Case: Community-based advocacy<br /><br /></a>
<div class="toggle" title='<img src="imgs/case.gif"> Community-based advocacy'><span style="color:#3e3e3e; font-weight:bold">
<ul class="htabs">
<li>
<a href="#situation"><div id="sit" style="background-image:url(imgs/menuOut_01.gif); background-repeat:no-repeat; width:91px; height:31px; float:left; display:block">&nbsp;</div></a>
</li>
<li>
<a href="#action"><div id="act" style="background-image:url(imgs/menuOut_02.gif); background-repeat:no-repeat; width:97px; height:31px; float:left; display:block">&nbsp;</div></a>
</li>
<li>
<a href="#result"><div id="res" style="background-image:url(imgs/menuOut_03.gif); background-repeat:no-repeat; width:90px; height:31px; float:left; display:block">&nbsp;</div></a>
</li>
</ul>
<div class="tabs">
<div id="situation" class="tab">
aaa
</div>
<div id="action" class="tab">
aaa
</div>
<div id="result" class="tab">
aaa
</div>
</div>

<div></div>
</div>

<script>
$(document).ready(function() {
 $('.toggle').hide();


 $('.toggleLink').click(function() {


 tb_show($(this).next('.toggle').attr('title'),'TB_inline?height=300&amp;width=500');
 $('#TB_ajaxContent').html($(this).next('.toggle').html());


 return false;

 });

});


 remarcarSec('nav2');remarcarMenu("bot1");

jQuery(document).ready(function(){
 jQuery(".tab:not(:first)").hide();

 jQuery(".tab:first").show();

 jQuery(".htabs a").click(function(){
 stringref = jQuery(this).attr("href").split('#')[1];
 jQuery('.tab:not(#'+stringref+')').hide();
 if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
 jQuery('.tab#' + stringref).show();
 }
 else
 jQuery('.tab#' + stringref).fadeIn();
 return false;
 });

});


</script>

Answer 1

The thickbox website says, that it is no longer maintained:

While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.

Since the jQuery UI Dialog is listed as one of these alternatives AND you are using jQuery UI already, I would suggest switching to the jQuery UI dialog. The dialog will cause you no problems in combination with the tabs.