Link to home
Start Free TrialLog in
Avatar of dimensionav
dimensionavFlag for Mexico

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').accordion({header: "h3", collapsible:true })      
            $('#Accordion01').accordion( "activate" , 0 )
            $('#Accordion01').accordion({change: function(event, ui) {
            }});
        });
        $(function(){
            // ACCORDION 2
            $('#Accordion02').accordion({header: "h3", collapsible:true })      
            $('#Accordion02').accordion( "activate" , 0 )
            $('#Accordion02').accordion({change: function(event, ui) {              
            }});
        });
        $(function(){
            // ACCORDION 3
            $('#Accordion03').accordion({header: "h3", collapsible:true })      
            $('#Accordion03').accordion( "activate" , 0 )
            $('#Accordion03').accordion({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.
ASKER CERTIFIED SOLUTION
Avatar of Mrunal
Mrunal
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Avatar of dimensionav

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.