Accordion jQuery failing to display tabs

I have a question about using 2 jQuery accordions with tabs inside them. Everything seems to be working, but when I try to expand the second accordion, the two tabs inside don't render properly. I'm not sure what the issue is. Any help on this would be highly appreciated.

$(document).ready(function() {
$("button").button();    
$("#tabs").tabs();    
$( "#accordion" ).accordion({
  collapsible: true
  }); 

});
</script>
</head>
<!--- Here's the UI Part that needs editing -->
<body>
   <div id="accordion">
    <h3>SIRF</h3>
        <div id="tabs">
        <ul>
            <li><a href="#tab1">Info</a></li>        
            <li><a href="#tab2">Setup</a></li>
            <li style="float:right;"><a href="#tab0">!</a></li>
        </ul>        
    </div>            
    <h3>TIRF</h3>
    <div id="tabs">
        <ul>
            <li><a href="#tab3">Info</a></li>        
            <li><a href="#tab4">Setup</a></li>
            <li style="float:right;"><a href="#tab0">!</a></li>
        </ul>

    </div>
</div>
</body>

Answer №1

When using jQuery with multiple "tabs" divs, you need to ensure that each one is named differently and that the function .tabs() is called on each of them separately. Remember, IDs in HTML must be unique.

Check out this working example for reference.

Answer №2

After conducting thorough research and experimentation, I discovered that assigning unique IDs to different div elements effectively resolved the issue at hand. I shared my findings in a response posted around the same time as CDspace, who highlighted a similar solution.

$(document).ready(function() {
$("button").button();    
$("#section1").tabs();   
$("#section2").tabs();  
$( "#accordion" ).accordion({
      collapsible: true
      }); 

    });
    </script>
    </head>
    <!--- The UI Part to EDIT -->
    <body>
       <div id="accordion">
        <h3>SIRF</h3>
            <div id="section1">id="tabs">
            <ul>
                <!--- TABS are Seperated by "li" -->
                <li><a href="#tab1">Info</a></li>        
                <li><a href="#tab2">Setup</a></li>
                <!-- <li><a href="#tab3"></a></li> -->        
                <li style="float:right;"><a href="#tab0">!</a></li>
            </ul>        
        </div>            
        <h3>TIRF</h3>
        <div id="section2">id="tabs">
            <ul>
                <!--- TABS are Seperated by "li" -->
                <li><a href="#tab3">Info</a></li>        
                <li><a href="#tab4">Setup</a></li>
                <!-- <li><a href="#tab3"></a></li> -->        
                <li style="float:right;"><a href="#tab0">!</a></li>
            </ul>

        </div>
    </div>
    </body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Securing access across multiple routes in a React application

I am facing a challenge in my React app where I need to verify the logged-in state before allowing access to multiple routes. Despite consulting various resources like Stack Overflow for solutions such as creating a Private Route, I have only found example ...

Tips for effectively managing relationships in a RESTful API

Exploring the concept of REST architecture through the development of a RESTful service for an 'Issues Tracking Application'. In this application, users, projects, issues, and comments are integral components. The relationships are outlined as f ...

JavaScript obtain scroll position of a child element

I have a setup that looks something like the following: <div> <div id="scrollID" style="height:100px;"> content here </div> </div> <script> document.getElementById("myDIV").addEventListener("touchstart", m ...

What is the most efficient way to display a dynamic alphabetical order list?

sample code: <table width="100%" cellspacing="0" cellpadding="0" border="0" style="line-height: 1.7;"> <tbody> <?php $this->db->select('*'); $this->db->from('cm_options'); ...

Navigating race conditions within Node.js++]= can be challenging, but there are strategies

In the process of developing a MERN full stack application, I encountered a scenario where the frontend initiates an api call to "/createDeckOfCards" on my NodeJS backend. The main objective is to generate a new deck of cards upon clicking a button and the ...

The functionality of a Google chart is determined by the value of the AngularJS $scope

I recently started working with AngularJS and Google charts. I've successfully created a Google chart using data from AngularJS. It's functioning properly, but now I want to make the chart dynamic based on my Angular Scope value. I have a filter ...

What is the best way to handle JSON data errors when a value is undefined?

I am currently working on a piece of code that displays JSON data in HTML. However, if a value is undefined, it doesn't display anything. How can I handle this error so that if a value is undefined, it will show "N/A" instead of breaking the code? ...

JS and its dynamic color changes

A game has been developed using JavaScript and HTML. The game features a table with cells that are assigned IDs for toggling colors using an onClick function. The objective is simple: when a cell is clicked, all neighboring cells, including the clicked one ...

development of MapLayers with rails and javascript

As a newcomer to RoR, I am encountering an issue that seems to be eluding me. I attempted to replicate the example application found on the mapLayers GitHub repository at https://github.com/pka/map_layers/wiki. However, all I see is the JavaScript code gen ...

Is it possible to create an image or logo that moves in sync with the user's scrolling

Having trouble articulating this question, but I'm trying to replicate the logo in the top right corner of this website: I want the logo to move along with the user as they scroll down, remaining visible at all times. Any ideas on how to achieve this ...

Connecting multiple TypeScript files to a single template file with Angular: A comprehensive guide

Imagine you are working with a typescript file similar to the one below: @Component({ selector: 'app-product-alerts', templateUrl: './product-alerts.component.html', styleUrls: ['./product-alerts.component.css'] }) expo ...

Tips for determining the minimum value within an array of objects across multiple keys using a single function

I am currently tasked with the challenge of determining the minimum value from an array of objects that contain multiple keys. My ultimate goal is to identify the minimum value among all keys or specific keys within the objects. For instance var users = ...

Restrict the number of labels on Chart.js exclusively for smaller displays

How to Limit the Number of Labels on a Chart.js Line Chart I am looking for a way to decrease the number of labels on my line chart only when it is viewed on a small device. The solution provided in the previous post suggests using the following code: xAx ...

Tips on creating a visually appealing layout using jQuery

Displayed below is the format I need to present in a visually appealing layout. This involves adding a header and footer, while ensuring that the jquery event values in the cash and balance textboxes are retained. <div class="small-12 medium-6 large-6 ...

The AXIOS method in Express.js is designed to return a Promise object that may contain an

I am currently learning ExpressJS and Axios I have created a folder named utils and placed the axios.js file const axios = require('axios'); loadDataPesan=async function(opts){ axios.get('localhost/getData', { params ...

Is there a way to make my code on Google Sheets work across multiple tabs?

My Google Sheets code successfully pulls information from the main tab into my CRM Software every time someone fills out a form online. However, I'm struggling to get the script to run for multiple tabs on the same spreadsheet. I've tried a few s ...

AngularJS Chrome Extension has been flagged as potentially harmful, despite the implementation of compileProvider.aHrefSanitizationWhitelist. This has resulted

I have previously shared this issue, however, the suggested solutions did not resolve it. Therefore, I am reposting with a more widely recognized solution: I am currently working on developing a chrome extension using AngularJS. In my base directive, I am ...

Encountering Webpack issues following the transition to Next 13

Since updating Next to version 13, we've encountered issues with our application not building properly. It appears that webpack is having trouble with imports, exports, and potentially typescript. ../../libs/queries/src/lib/groq/searchFaq.ts Module pa ...

How can I integrate live data from a MySQL database to automatically update tables on a website?

I have developed a basic application using C# and .NET, with MVC architecture and a MySQL database linked to my server. I have utilized ADO.NET database models to automatically generate static data in my views from the models saved in the database, with ...

Unable to generate a navigation panel using HTML/CSS and jQuery

I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...