Why I cant use an accordion in more than one tab in jquery?

Posted on 2012-09-05
Last Modified: 2012-10-25
I am using a couple of controls of jquery, a tabs controll and an accordion, those are like this in the HTML:


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:

            // ACCORDION 1
            $('#Accordion01').accordion({header: "h3", collapsible:true })      
            $('#Accordion01').accordion( "activate" , 0 )
            $('#Accordion01').accordion({change: function(event, ui) {
            // ACCORDION 2
            $('#Accordion02').accordion({header: "h3", collapsible:true })      
            $('#Accordion02').accordion( "activate" , 0 )
            $('#Accordion02').accordion({change: function(event, ui) {              
            // 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-->
                    <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>
                <!--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>

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.

Question by:dimensionav
    LVL 22

    Accepted Solution

    As you are displaying Tab 1 as default tab selected, it is showing for first accordion.
    This may be because of inactive tabs.
    You can check whether you are getting $('#Accordion02') as [object] or not.
    $('#Accordion02') in Inative tab container.
    Hope this helps you.
    LVL 9

    Expert Comment

    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.

    Author Comment

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now