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.

https://i.sstatic.net/Ujz9H.jpg https://i.sstatic.net/sFc1K.jpg

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

Is it possible to load the response from the $.post function, which contains GIF content, into a JavaScript Image object

How can I preload an image that the server only returns on a POST request? I want to load the image before displaying it. How can I store the result in a JavaScript object? $.post('image.php', {params: complexParamsObject}, function(result) { ...

javascriptjqueryajaximagedownload

Exploring the Power of v-for in Nested Objects with Vue

I currently have a dataset in the following structure: itemlist : { "dates": [ "2019-03-15", "2019-04-01", "2019-05-15" ], "id": [ "arn21", "3sa4a", "wqa99" ], "price": [ 22, 10, 31 ] } My goal is t ...

javascriptvue.jsvuejs2

The sorting functionality in Mysql using ORDER BY length(col), col seems to be malfunctioning

Database Table: Mysql Employee Table Note: The emp_id field is stored as a varchar String query="select * from employee ORDER BY length(emp_id),emp_id"; When running only the above query, the output is as expected: However, when executing the follo ...

jqueryhtmlmysqljsp

Creating a simple Node.js project using material web components - a step-by-step guide

I have recently started experimenting with Node.js. This is a basic program I created to test the integration of material-components-web. I followed the instructions provided in the readme file and here's what I have implemented so far: package.json ...

javascriptnode.jsnpmpolymer

How can I replicate the functionality of the span element using Javascript?

Using Javascript, I am able to display a paragraph without the need for HTML. By adding it to an HTML id, I can manipulate individual words within the text. My goal is to make specific words cursive while keeping the entire paragraph in its original font s ...

javascripthtml

The SvelteKit server successfully loaded data, displaying it on the sources/index page in the Chrome

I am currently in the process of developing a basic web application that utilizes self-hosted Pocketbase on the backend and SvelteKit as a meta framework. Recently, I discovered that the data loaded by my server is visible in the browser's sources/in ...

javascriptnode.jssveltesveltekitpocketbase

I am having trouble authorizing a GET request with fetch

I've been attempting to utilize fetch in the browser, but it's not cooperating. Here's what I tried: fetch('https://api-2sizcg3ipa-uc.a.run.app/fats', { headers: {'Authorization': 'Basic ' + btoa('username ...

javascriptjsonheadercorsfetch

Error: The jasmine framework is unable to locate the window object

Currently, I am testing a method that includes locking the orientation of the screen as one of its functionalities. However, when using Jasmine, I encountered an error at the following line: (<any>window).screen.orientation.lock('portrait&apos ...

javascripttypescriptjasminewindow

How to Customize Headers with Color and Size in MKDocs

In the following code, you'll find instructions for adjusting a dropdown menu that displays an image when expanded. The challenge is to reduce the size of the banner by half and remove the pencil icon on the left side. How can we modify the code so th ...

htmlmkdocs-material

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view th ...

javascriptjqueryhtmlcsssvg

Insert an image into a Word document using the addHtml function in PhpWord

Can someone help me with an issue I'm having in PhpWord? I am trying to insert an image into a Word document using HTML code, but it doesn't seem to be working. I am working in Visual Studio Code and the image is located in the 'public&apos ...

htmlphpword

Bootstrap 4 input fields extend past padding boundaries

I have created a basic form using the following code: <div class="container"> <div class="jumbotron" style="width:100%"> <h1> ConfigTool Web Interface </h1> <p> Edit the con ...

csstwitter-bootstrapbootstrap-4

Instant Access to a Precise Slide

Using a slider named mySlider or SL_Slider, which is powered by the MooTools library. When on the page with the slider, there is a simple script for the href to call the appropriate slide: <a href="javascript:mySlider.numPress(3);">link</a> ...

javascripthtmlmootools

How can you pass two distinct variables in a JavaScript function?

This is the JavaScript code for my first page: <script> function MessageDetailsById(id) { $("#active"+id).css({"color":"red"}); var http = new XMLHttpRequest(); var url = "Ajax.php"; ...

javascriptphpjqueryajax

Retrieving chosen items from NextUI-Table

I am completely new to JavaScript and NextUI. My usual work involves C# and DotNET. I have a requirement to create a table with selectable items, and when a button is clicked, all the selected items should be passed to a function on the server that accepts ...

javascriptnext.jsnextui

What is the best way to use AJAX to send a downloadable file in WordPress?

Currently working on developing a WordPress plugin and could use some assistance ...

javascriptphpjqueryajaxwordpress

Can you explain the distinction between browser.sleep() and browser.wait() functions?

Encountering timing problems with my protractor tests. Occasionally, test cases fail because of network or performance-related issues. I managed to resolve these issues using browser.sleep(), but recently discovered browser.wait(). What sets them apart an ...

javascriptangularjsseleniumprotractor

Tips for triggering a click event on a DOM element using Angular 2

How can I automatically load a component upon loading? <app-main id="tasks" [(ngModel)]="tasks"></app-main> Here is the function call from JavaScript: public tasks; ngOnInit() { this.tasks.click(); } I have attempted using document.getE ...

javascriptangulardom

Creating a responsive textbox in Bootstrap - tips and tricks!

I am trying to use Bootstrap and I have a Textbox that contains some text. How can I make it responsive, meaning it adjusts to the screen size when I resize the window? When dealing with images, we use the "image-responsive" class, but what about a Textb ...

csstwitter-bootstrapresponsive-designtextbox

Using AJAX to Capture PHP Error Responses

I have implemented a form where users can upload profile pictures and see live validation feedback without refreshing the page. I am currently using AJAX for this functionality, but it seems that the requests are not reaching the PHP file. Also, after subm ...

phpjqueryajax