Bootstrap 4 tabs function perfectly in pairs, but encounter issues when there are three of them

Having trouble with bootstrap4 tabs not working properly? They function well with 2 tabs using the code below:

<div class="row">
    <div class="col-12">
        <ul class="nav nav-tabs" id="registration-picker-acc-select" role="tablist">
            <li class="nav-item">
                <a class="nav-link login-link active" role="tab" data-toggle="tab" href="#form-login">
                    Login
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link register-link" role="tab" data-toggle="tab" href="#form-register">
                    Register
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="tab-content">
            <div id="form-login" class="tab-pane fade show active" role="tabpanel">
                {include file="inc/shared/my-account/login-form.html"}
            </div>
            <div id="form-register" class="tab-pane fade" role="tabpanel">
                {include file="inc/shared/register/form.html"}
            </div>
        </div>
    </div>
</div>

However, issues arise when using:

<div class="row">
    <div class="col-12">
        <ul class="nav nav-tabs" id="cart-picker-acc-select" role="tablist">
            <li class="nav-item">
                <a class="nav-link login-link active" id="form-login-top" role="tab" data-toggle="tab" href="#form-login">
                    Login
                </a>
            </li>
                <li class="nav-item">
                    <a class="nav-link register-link" id="form-register-top" role="tab" data-toggle="tab" href="#form-register">
                        Register
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link continue-without-register-link" id="form-guest-top" role="tab" data-toggle="tab" href="#form-guest">
                        Continue without an account
                    </a>
                </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="tab-content">
            <div id="form-login" class="tab-pane fade show active" role="tabpanel" aria-labelledby="form-login-top">
                {include file="inc/shared/my-account/login-form.html"}
            </div>
                <div id="form-register" class="tab-pane fade" role="tabpanel" aria-labelledby="form-register-top">
                    {include file="inc/shared/register/form.html"}
                </div>
                <div id="form-guest" class="tab-pane fade" role="tabpanel" aria-labelledby="form-guest-top">
                    {include file="inc/shared/cart/step2/guest/form.html"}
                </div>
        </div>
    </div>
</div>

After clicking on the third tab while navigating between the first two works smoothly, it starts causing disruptions:

  • The fade classes vanish from the panels
  • Transitions malfunction
  • The third panel might remain visible unexpectedly after switching to another one

Ran the page through the w3 validator and found no messages indicating potential id conflicts.

Note that the content within these tabs also contains their own separate tabs.

javascripthtmlcssbootstrap-4

Answer №1

Everything looks good with this code, just a minor issue was discovered in bootstrap 4.0.0-beta1 which has been fixed in the latest version, bootstrap 4.0.0-beta2.

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

Disallowing selection on input text field

I am seeking to disable selection on an input field while still allowing for focusing, with the following criteria: Preventing selection via mouse Preventing selection via keyboard (including Ctrl+A, shift+arrows) Permitting focus on the field using both ...

javascriptcss

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Seeking assistance in creating a grid of divs, I am working on finding the square root of the user's input to determine the height and width required to form a square. The code below is what I currently have: $('#size').click(function(){ $ ...

javascriptjqueryhtmlcss

Error message "SyntaxError: Unexpected token < in JSON at position 0" encountered while using AJAX

When data is sent through an ajax request and processed, a returned array is encoded into json format. $response = array( 'data' => $leaveData, 'message' => 'Event added successfully', ...

javascriptphpjqueryjsonajax

Issue with model not being updated after making a request using $http service

I have a hunch as to why it's not functioning properly, but I'm unsure on how to troubleshoot this. Despite looking at similar questions and answers on SO, I am unable to resolve my issue. My goal is to trigger a service upon page load in order ...

javascriptangularjs

What is the best way to access all sections of a JSON file containing nested objects within objects?

Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...

javascriptjqueryhtmljson

Issue with making requests across origins in Vuejs using axios

Currently, I am utilizing Vuejs and axios for handling web requests. So far, I have successfully managed to perform GET, POST, and PUT operations. However, the new challenge that I am facing is uploading media to the server. The server necessitates sending ...

javascriptvue.js

Can we use Selenium to extract text from a webpage that is not present in the HTML but is instead fetched from an API response?

There is text in the text field, but the HTML isn't displaying it. Check out the Text field with HTML. Can Selenium extract the text "test" if it is retrieved from an API? ...

javahtmlapiselenium-webdrivertextfield

Generating SVG images that show up as black in light mode and switch to light colors in dark mode

I am currently working on a website that has the option to switch between light and dark mode, and I need my logo to adjust accordingly. The black elements of my logo should appear black in dark mode and light in light mode. I attempted using the CSS cod ...

htmlcsssvg

"Disabling Click Event on Sidebar Menu in Angular: A Step-by-Step Guide

I am working on an Angular project with a sidebar that I want to modify in order to disable click events on the menu items. My goal is to guide users through a specific flow without allowing them to navigate freely. However, simply disabling the [routerLin ...

javascripthtmlcssangularbootstrap-4

What could be causing issues with my jQuery POST call?

I am attempting to establish authentication with a remote service using jQuery. Initially, I confirmed that I can accomplish this outside of the browser: curl -X POST -H "Content-Type: application/json" -H "Accept: appliction/json" -d '{"username":" ...

javascriptjqueryajaxpost

How to dynamically change the border-top color of an <a> tag in a menu using a jQuery loop

I am interested in adding a colorful border-top to my menu using jQuery. I know this can be achieved with HTML by including style="border-top-color: red;", but I want to explore the jQuery method. Here is what I have attempted so far: var colors = [ ...

javascriptjquerycss

Troubleshooting issues with sending email with attachments in PHP and HTML

I've been having trouble sending an email with an attachment file; it just doesn't seem to work and I can't seem to receive any files. Although my HTML syntax appears correct, as I haven't received any bounce-back emails, the issue per ...

phphtmlemail

Tips for including items in a list nested within a dictionary using JavaScript

I'm currently working with a JavaScript dictionary and I need to insert an element into a list that belongs to a specific key within the dictionary. Check out the code snippet below: lines = [ [1,2], [2,4], [2,3], [3,5] ]; nodes = [ ...

javascriptdictionary

Update links within a designated div section

How can I change the color and alignment of anchor tags within the third child div that is part of a set of three nested divs? These child divs are arranged side by side within a parent div with the class .logo-bckgrnd-rpt. Although I have successfully tar ...

csscss-selectors

Issue encountered during JSON file extraction (Firefox)

Within my Node.js application, there is a specific route where I retrieve a large JSON dataset from a Postgres database and then send it in a compressed format as a response. To accomplish this, I utilize the Zlib module to compress the data using gzip. Be ...

javascriptangularjsjsonnode.jsfirefox

Automatically bypassing git conflicts in package.json: A step-by-step guide

We encounter frequent updates to shared npm packages in our app, resulting in multiple pull requests updating the same package version. Consequently, conflicts arise on GitHub when these pulls are merged into the master branch. Is there a way to automati ...

javascriptgitgithubnpm

Consistently navigating back to the Home Page through AJAX

Can anyone assist me in resolving my issue? I have three files: index.php, process.js, and redirect_process.php. The index.php serves as my homepage with a form embedded in it. Whenever the submit button is clicked, the process.js script is triggered to v ...

javascriptphpjqueryhtmlajax

Trouble with setting HTML table width

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" width="100%"> <tr> <td>bbbbbbbbbbbbbbbbbbbbbbbbbbb ...

htmlcsswidthhtml-table

Loop through two sets of data and perform multiplication on specific attributes when they match

I have a unique item that looks like this Object {SD00002:1,SD00011:3,SD00002:6} The values of the properties are set automatically. Currently, I have an array of similar objects as shown in the image below: https://i.sstatic.net/pSkvf.jpg My goal is to ...

javascriptangularjsobject

Transmit data via AJAX to the RequestBody

Although seemingly simple, this issue has proven to be quite challenging. I am confident that it can be easily resolved, but the solution continues to elude me. Thank you for any assistance you can provide. Here is the code snippet in question : var samp ...

javascriptjqueryajaxobject