Vertical tab design in Bootstrap does not automatically switch tabs

I'm managing two separate tab boxes that switch content when clicked or over a 5-second period.

The left box is functioning correctly, but the right box is changing the active state without updating the content.

Here's the HTML for the left box:

<div class="media">
                        <div class="parrent pull-left">
                            <ul class="nav nav-tabs nav-stacked">
                                <li class=""><a href="#tab1" data-toggle="tab" class="analistic-01">Architect</a></li>
                                <li class=""><a href="#tab2" data-toggle="tab" class="analistic-03">AIA</a></li>
                                <li class=""><a href="#tab3" data-toggle="tab" class="tehnical">IRS </a></li>
                                <li class=""><a href="#tab4" data-toggle="tab" class="tehnical">AKIN GUMP</a></li>
                                <li class=""><a href="#tab5" data-toggle="tab" class="tehnical">PWC</a></li>
                                <li class=""><a href="#tab6" data-toggle="tab" class="tehnical">EPA</a></li>
                            </ul>
                        </div>

                        <div class="parrent media-body">
                            <div class="tab-content">
                                <div class="tab-pane fade" id="tab1">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="http://www.architectmagazine.com/awards/r-d-awards/award-green-zip-tape_o"><img class="img-responsive" src="images/Awards/R&D.png"></a>
                                            <a href="http://www.architectmagazine.com/awards/r-d-awards/award-green-zip-tape_o">Click for Award</a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Architect Magazine</h2>
                                            <p>It’s hard to get simpler in conception and execution than Green-Zip Tape. The product is a substitute for the joint-compound tape that has been used between gypsum board panels since the introduction of prefabricated plasterboard in the early 1930s. The product impressed all three jurors.</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Other tab panes omitted for brevity -->
                                
                            </div>
                        </div>
                    </div>

HTML for the right box:

<div class="media">
                        <div class="parrent pull-left">
                            <ul class="nav nav-tabs nav-stacked nav-two">
                                <li class=""><a href="#set1" data-toggle="tab" class="analistic-01">Marek</a></li>
                                <li class=""><a href="#set2" data-toggle="tab" class="analistic-02">Ozarks Bank</a></li>
                                <li class=""><a href="#set3" data-toggle="tab" class="tehnical">CBRE </a></li>
                                <li class=""><a href="#set4" data-toggle="tab" class="tehnical">Habitat</a></li>
                                <li class=""><a href="#set5" data-toggle="tab" class="tehnical">Huffman</a></li>
                                <li class=""><a href="#set6" data-toggle="tab" class="tehnical">Holiday</a></li>
                            </ul>
                        </div>

                        <div class="parrent media-body">
                            <div class="tab-content">
                                <div class="tab-pane fade" id="set1">
                                    <div class="media">
                                        <div class="pull-left boxImg">
                                            <a href="Ref/Marek.pdf"><img class="img-responsive" src="images/Referals/MarekBrothers.jpg"></a>
                                            <a href="Ref/Marek.pdf">Click for Reference</a>
                                        </div>
                                        <div class="media-body">
                                            <h2>Marek</h2>
                                            <p>We recently built our new headquarters building using the Green-Zip Partition System everywhere. To me, it’s a simple solution that everyone should take advantage of!
                                            <br>
                                            -<b>R. Stan Marek</b>, Chairman
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Other tab panes omitted for brevity -->

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

And here is the JavaScript:

var cycle = {
  onReady: function() {
    $(".nav-stacked li:first").addClass("active in");
    $("#tab1").addClass("active in");

    setInterval(function() {
      var $navStacked = $("li.active");
      var tabContent = $("li.active a").attr("href");
      if ($navStacked.is(".nav-stacked li:last-child")) {
        $navStacked.removeClass("active in");
        $(".nav-stacked li:first").addClass("active in");
        $("div " + tabContent).removeClass("active in");
        $("div#tab1").addClass("active in");
      } else {
        $navStacked.removeClass("active in").next().addClass("active in");
        $("div " + tabContent).removeClass("active in").next().addClass("active in");
      }
    }, 5000);
  }
};
$(document).ready(cycle.onReady);

var cycle2 = {
  onReady: function() {
    $(".nav-two li:first").addClass("active in");
    $("#set1").addClass("active in");

    setInterval(function() {
      var $navStacked2 = $("li.active");
      var tabContent2 = $("li.active a").attr("href");
      if ($navStacked2.is(".nav-two li:last-child")) {
        $navStacked2.removeClass("active in");
        $(".nav-two li:first").addClass("active in");
        $("div " + tabContent2).removeClass("active in");
        $("div#set1").addClass("active in");
      } else {
        $navStacked2.removeClass("active in").next().addClass("active in");
        $("div " + tabContent2).removeClass("active in").next().addClass("active in");
      }
    }, 5000);
  }
};
$(document).ready(cycle2.onReady);

The script 'cycle' controls the left box, while the script 'cycle2' is meant to control the right one.

If you need more information, check out the original JSFiddle.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

revise your function target

Make a modification to the HTML by changing the class Name Box on the right to: tab-wrap2

var cycle = {
            onReady: function () {
                $(".tab-wrap .nav-stacked li:first").addClass("active in");
                $(".tab-wrap #tab1").addClass("active in");
                setInterval(function () {
                    var $navStacked = $(".tab-wrap li.active");
                    var tabContent = $(".tab-wrap li.active a").attr("href");
                    if ($navStacked.is(".tab-wrap .nav-stacked li:last-child")) {
                        $navStacked.removeClass("active in");
                        $(".tab-wrap .nav-stacked li:first").addClass("active in");
                        $(".tab-wrap div " + tabContent).removeClass("active in");
                        $(".tab-wrap div#tab1").addClass("active in");
                    } else {
                        $navStacked.removeClass("active in").next().addClass("active in");
                        $(".tab-wrap div " + tabContent).removeClass("active in").next().addClass("active in");

                    }
                }, 5000);
            }
        };
        $(document).ready(cycle.onReady);

        var cycle2 = {
            onReady: function () {
                $(".tab-wrap2 .nav-two li:first").addClass("active in");
                $(".tab-wrap2 #set1").addClass("active in");

                setInterval(function () {
                    var $navStacked2 = $(".tab-wrap2 .nav-two li.active");
                    var tabContent2 = $(".tab-wrap2 li.active a").attr("href");
                    if ($navStacked2.is(".tab-wrap2 .nav-two li:last-child")) {
                        $navStacked2.removeClass("active in");
                        $(".nav-two li:first").addClass("active in");
                        $(".tab-wrap2 div" + tabContent2).removeClass("active in");
                        $(".tab-wrap2 div#set1").addClass("active in");
                    } else {
                        $navStacked2.removeClass("active in").next().addClass("active in");
                        $(".tab-wrap2 div" + tabContent2).removeClass("active in").next().addClass("active in");

                    }
                }, 5000);
            }
        };
        $(document).ready(cycle2.onReady);

https://jsfiddle.net/DTcHh/16664/

Answer №2

You've overlooked a small detail. Update this line

$("div#tab1").addClass("active in");

to

$("div#set1").addClass("active in");

By making this change, your issue will be resolved FIDDLE. This particular line controls the display of the tab.

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

Having trouble with AngularJS UI Router failing to load template and controller?

I am currently trying to identify the error in my code. Whenever I access /dashboard, it only loads the template from the first route, which is defined as SYSTEM_VARS.includes.general.root. However, it does display the console.log message inside the resolv ...

javascriptangularjsangular-ui-router

Leveraging AJAX for transmitting form information to a php script without relying on jQuery

I want to explore AJAX by implementing a basic form data submission to a php script and database. For educational purposes, I've reached a standstill after hitting the "Create Profile" button with no action. Could someone spot any syntax or structural ...

javascriptphpajaxmysqli

What are some strategies for creating a recursive function in JavaScript that avoids exceeding the maximum call stack size error?

I need assistance creating a walking robot function in JavaScript, but I am encountering a call stack size error. function walk(meter) { if(meter < 0) { count = 0; } else if(meter <= 2) { count = meter; ...

javascript

When Selenium in JavaScript cannot locate a button element, use `console.log("text")` instead

I am trying to capture the error when there is no button element available by using console.log("No element"). However, my code is not working as expected. const {Builder, By} = require("selenium-webdriver"); let driver = new Builder().forBrowser("chrome ...

javascriptnode.jsseleniumdebuggingsetinterval

The execution of my code differs between running it locally and in online code editors like CodePen or Plunker

Using jQuery Terminal, I have the following code: function display() { for (var i = 0; i < 100; ++i) { this.echo('line ' + i, { flush: false }); } this.flush(); setTimeout(function() { //thi ...

javascriptjqueryjquery-terminalcodepen

swapping images using jquery

I figured out how to change the image by clicking on it, but now I want to create a loop where clicking again will revert back to the original image and then click again to display the new image (only 2 images are needed). <script type="text/javascript ...

jqueryimage

Issue loading a 300 MB file into BigQuery results in a timeout error

Trying to implement the Node.js example shown in the data post request section (located towards the end here: https://cloud.google.com/bigquery/loading-data-post-request) has hit a snag when dealing with larger files. While the sample code functions proper ...

javascriptnode.jsgoogle-bigquery

Determine the HTTP status code for a request using Vue.js and Ajax

I need to retrieve the HTTP status code after submitting a form (using the form submission function): return fetch(serviceUrl + 'Collect', { method: "POST", headers: new Headers({ "Content-Type": "application/json", Authoriza ...

javascriptjsonajaxhttpvue.js

Encountering NPM install gyp errors in VSCode indicating that gyp is searching for Visual Studio

Running npm install on a local project has been quite challenging for me, as I keep encountering errors every time I try. Fortunately, some valuable information I found related to gyp and Python helped me make some progress. However, I'm currently fac ...

javascriptnode.jsvue.jsvisual-studio-codenpm

What is the proper way to safely close the pg-promise connection in a node.js environment once all jest tests are completed?

I am facing a challenge in closing a PG-Promise database connection after running a function test in Jest. The database connection is initialized in one central location (db.js) and required in multiple places. In this scenario, it is being used by seed.j ...

javascriptnode.jspostgresqljestjspg-promise

What is the best way to alternate $httpBackend when[method] declarations in unit tests to handle multiple requests?

When conducting my testing, I set up the model data and mock the response: beforeEach(function(){ var re = new RegExp(/^http\:\/\/.+?\/users-online\/(.+)$/); $httpBackend.whenGET(re).respond({id:12345, usersOnline:5000}); }) ...

javascriptangularjsunit-testingjasmine

Encountering the "potential null object" TypeScript issue when utilizing template ref data in Vue

Currently, I am trying to make modifications to the CSS rules of an <h1> element with a reference ref="header". However, I have encountered a TypeScript error that is preventing me from doing so. const header = ref<HTMLElement | null> ...

javascripttypescriptvue.jsfrontend

Retrieve data from the table and dropdown menu by clicking a button

A script is in place that retrieves data from two columns (Members, Description) dynamically from the table upon button click. Table html Here is the JQuery code responsible for extracting values from the table: $(function() { $('#myButton') ...

javascriptjqueryhtml

The JObject parser abruptly halts its execution without producing any results or indicating any errors

I have been attempting to retrieve and parse a JSON response from a webapi using the following code: var pemail = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44302b2a3d37042329252d286a272b29">[email protected]</ ...

c#jqueryjsonparsingjson.net

Managing Datatable with a dynamic header and data is an essential skill that can greatly enhance

I am struggling to handle the Datatable for different header column names with data from my controller. I am passing table headers column name and table data value from my controller. Although I am able to access columns in json within the drawCallback f ...

javascriptphpjquerydatatable

What is the importance of having Express in the frontend?

As someone who is relatively new to the world of JavaScript and web applications, I recently came across an Express web application project that contained a public directory, client directory, and server directory. This has raised some questions for me. I ...

javascriptnode.jsreactjsexpress

Use jQuery to insert the TEXT heading as an input value

Can anyone help me with copying text from a heading to an input value? Here's an example: <h2 class="customTitleHead">This is a Heading</h2> I want to transfer the text from the heading into an input field like this: <input type="tex ...

javascriptjquerycsshtml

Guide to custom sorting and sub-sorting in AngularJS

If I have an array of objects like this: [ { name: 'test1', status: 'pending', date: 'Jan 17 2017 21:00:23' }, { name: 'test2', sta ...

javascriptangularjssortingangularjs-ng-repeat

Every time I enter npm start in the terminal, I consistently encounter this error

After developing a simple web app and posting it on my repository, I started encountering these persistent errors. npm ERR! code ELIFECYCLE – David 1 hour ago npm ERR! syscall spawn C:\Windows\system32\cmd.exe;C:\Users'usernam ...

javascriptreactjsnpm-start

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

I'm new to working with the canvas element and I want to create some shapes on it. Can someone provide me with guidance on how to draw a Rhombus or Parallelogram on a canvas? Something similar to what is shown in this image: https://i.stack.imgur.c ...

javascripthtmlcanvas