Tengo en una pagina un widget tab de jquery-ui y en cada tab cargo una tabla algo así:
Código HTML :
<div id="tabs" style="display:none; position:static"> <!-- INICIO TABS --> <ul> <li><a href="#tabs-1">Enero</a></li> <li><a href="#tabs-2">Febrero</a></li> <li><a href="#tabs-3">Marzo</a></li> <li><a href="#tabs-4">Abril</a></li> <li><a href="#tabs-5">Mayo</a></li> <li><a href="#tabs-6">Junio</a></li> <li><a href="#tabs-7">Julio</a></li> <li><a href="#tabs-8">Agosto</a></li> <li><a href="#tabs-9">Septiembre</a></li> <li><a href="#tabs-10">Octubre</a></li> <li><a href="#tabs-11">Noviembre</a></li> <li><a href="#tabs-12">Diciembre</a></li> </ul> <div id="tabs-1"> <!--INICIO TAB--> Venta almacenes Enero <?php echo $yearsel;?> <?php showtable($yearsel,1); ?> <BR> <div id="accordion"> <!--INICIO ACORDION--> <h3><a href="#">Presupuestos</a></h3> <div> <p> <?php show_budgets($yearsel,1); ?> </p> </div> <h3><a href="#">Comparativos</a></h3> <div> <p> Comparativos </p> </div> <h3><a href="#">Crecimiento</a></h3> <div> <p> Crecimiento </p> </div> </div> <!--FIN ACORDION--> </div> <!--FIN TAB--> <div id="tabs-2"> <!--INICIO TAB--> Venta almacenes Febrero <?php echo $yearsel;?> <?php showtable($yearsel,2); ?> <BR> <div id="accordion"> <!--INICIO ACORDION--> <h3><a href="#">Presupuestos</a></h3> <div> <p> <?php show_budgets($yearsel,2); ?> </p> </div> <h3><a href="#">Comparativos</a></h3> <div> <p> Comparativos </p> </div> <h3><a href="#">Crecimiento</a></h3> <div> <p> Crecimiento </p> </div> </div> <!--FIN ACORDION--> </div> <!--FIN TAB--> </div> <!-- FIN TABS-->
Solo pongo una parte del codigo para no meter los demas tabs, el asunto es que al cargarme la página y acceder al tab 1 en este caso seria mes enero, me muestra el jquery-ui accordion con el contenido que carga, pero cuando doy clic en el tab 2 que corresponde a febrero, me muestra la tabla pero no me muestra el jquery-ui accordion.
El codigo javascript es este:
Código Javascript :
<script>
$(document).ready(function(){
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
collapsible: true,
icons: icons,
autoHeight: false,
navigation: true
});
});
$(function() {
//$( "#tabs" ).tabs().show('slow');
$( "#tabs" ).tabs().fadeIn('slow');
$("#tabla_ventas .tablas th").addClass("ui-widget-header");
$("#tabla_ventas .tablas tr:even").addClass("even");
$("#tabla_ventas .tablas tr:odd").addClass("odd");
$("#tabla_ventas .tablas tr").hover(
function(){
$(this).addClass("ui-state-highlight");
},
function(){
$(this).removeClass("ui-state-highlight");
})
});}
);
</script>
El asunto es que en el segundo tab no me muestra el accordion, es como si se perdiesen o no tomase ni el css ni el codigo js a ver si me pueden ayudar se los agradecería.
