[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2012-09-05
Medium Priority
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

Mrunal earned 1000 total points
ID: 38370824
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.

Expert Comment

ID: 38371787
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

ID: 38376403
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.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
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…
Suggested Courses
Course of the Month19 days, 13 hours left to enroll

872 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