dimensionav
asked on
Why I cant use an accordion in more than one tab in jquery?
I am using a couple of controls of jquery, a tabs controll and an accordion, those are like this in the HTML:
TAB1
ACCORDION 1
TAB2
ACCORDION 1
TAB3
ACCORDION 1
The accordions are created by a function from a php and after testing my code the TAB1 is the only that has the accordion completed, the rest (TABS 2 and 3) are empty. I wonder if this has something to do with jquery or anything else.
This is my jquery code:
$(function(){
//Tabs
$('#Paises').tabs();
});
$(function(){
// ACCORDION 1
$('#Accordion01').accordio n({header: "h3", collapsible:true })
$('#Accordion01').accordio n( "activate" , 0 )
$('#Accordion01').accordio n({change: function(event, ui) {
}});
});
$(function(){
// ACCORDION 2
$('#Accordion02').accordio n({header: "h3", collapsible:true })
$('#Accordion02').accordio n( "activate" , 0 )
$('#Accordion02').accordio n({change: function(event, ui) {
}});
});
$(function(){
// ACCORDION 3
$('#Accordion03').accordio n({header: "h3", collapsible:true })
$('#Accordion03').accordio n( "activate" , 0 )
$('#Accordion03').accordio n({change: function(event, ui) {
}});
});
This is my HTML code:
<div id="Contenido" style="border-style: hidden; border-width: thin;">
<div id="Paises">
<!--Area de pestañas-->
<ul>
<li><a href="#Pais-1">España</a>< /li>
<li><a href="#Pais-2">Francia</a> </li>
<li><a href="#Pais-3">Italia</a>< /li>
</ul>
<!--Contenido de las pestañas-->
<div id="Pais-1"><?php echo($Texto1);?></div>
<div id="Pais-2"><?php echo($Texto2);?></div>
<div id="Pais-3"><?php echo($Texto3);?></div>
</div>
</div>
As you can see there is one $Texto var per each accordion inside the tab, this var is created at the top of the PHP file.
Regards.
TAB1
ACCORDION 1
TAB2
ACCORDION 1
TAB3
ACCORDION 1
The accordions are created by a function from a php and after testing my code the TAB1 is the only that has the accordion completed, the rest (TABS 2 and 3) are empty. I wonder if this has something to do with jquery or anything else.
This is my jquery code:
$(function(){
//Tabs
$('#Paises').tabs();
});
$(function(){
// ACCORDION 1
$('#Accordion01').accordio
$('#Accordion01').accordio
$('#Accordion01').accordio
}});
});
$(function(){
// ACCORDION 2
$('#Accordion02').accordio
$('#Accordion02').accordio
$('#Accordion02').accordio
}});
});
$(function(){
// ACCORDION 3
$('#Accordion03').accordio
$('#Accordion03').accordio
$('#Accordion03').accordio
}});
});
This is my HTML code:
<div id="Contenido" style="border-style: hidden; border-width: thin;">
<div id="Paises">
<!--Area de pestañas-->
<ul>
<li><a href="#Pais-1">España</a><
<li><a href="#Pais-2">Francia</a>
<li><a href="#Pais-3">Italia</a><
</ul>
<!--Contenido de las pestañas-->
<div id="Pais-1"><?php echo($Texto1);?></div>
<div id="Pais-2"><?php echo($Texto2);?></div>
<div id="Pais-3"><?php echo($Texto3);?></div>
</div>
</div>
As you can see there is one $Texto var per each accordion inside the tab, this var is created at the top of the PHP file.
Regards.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If the HTML you posted is correct, it looks like you might have "Accordion01" in all 3 of the tabs. Then when your jQuery goes to look for Accordion02 and Accordion03 they don't exist. I'd check if Texto2 and Texto3 are outputting the correct ID for their Accordions.
ASKER
mroonal how can I avoid display Tab1 as default tab? Would you mind to give jquery example? (I am newbie with jquery)
WebDevEM, Sorry for putting the same accordion 1 but that was just a typing error.
WebDevEM, Sorry for putting the same accordion 1 but that was just a typing error.