How come Bootstrap displays dual tabs simultaneously?

Having trouble navigating tabs on my website built with bootstrap v4. Clicking between different tabs causes two to display at the same time, but the issue resolves itself after clicking through them a few times. What am I doing wrong?

If you'd like to take a look: jsFiddle link

body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #868e96;
  text-align: left;
}

.search-tabs>h1 {
  font-weight: normal;
  margin-bottom: 15px;
}

...

</section>

javascriptjqueryhtmlcsstwitter-bootstrap-4

Answer №1

Below is a solution (somewhat of a workaround) for you: https://jsfiddle.net/k0uv976k/5/

$('a[data-toggle="tab"]').click(function(){
   $($(this).data('href')).show().addClass('show active').siblings().hide();
});
body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #868e96;
  text-align: left;
}

.search-tabs > h1 {
  font-weight: normal;
  margin-bottom: 15px;
}
.search-tabs .tabbable > .nav-tabs li {
    margin-bottom: -1px;
    margin-right: 5px;
    z-index: 0;
}
.search-tabs .tabbable > .nav-tabs li a.active {
    background-color: #FF9F00;
}
... (CSS code continues)

$search-tabs ...">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
... (Javascript and HTML code continues)

I utilized jQuery to activate tabs and modified href to data-href in HTML.

Updated response at behest of OP

Revised answer link here: https://jsfiddle.net/k0uv976k/6/

This should help address your issue effectively.

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

Incorporating SCSS directly in React component along with material-ui styling

I'm having trouble incorporating styles into my React component. I'd prefer to use SCSS instead of either using the withStyle function or importing a plain CSS file into a JS file. For instance, I would like to import my SCSS file into ButtonCom ...

javascriptcssreactjssassmaterial-ui

Dynamic Bootstrap tooltip

I have a simple Javascript code snippet that I'm struggling with: $("#myinput").hover(function(){ if(condition){ $(this).tooltip({placement: "bottom", title: "mytitle"}); } ); Accompanied by its HTML cou ...

javascripthtmlbootstrap-5

Swap out a component for another using a higher order component (HOC perhaps?)

I have noticed that certain libraries like "framer-motion" in react utilize this syntax, for instance to include an animated H1: <motion.h1> where the h1 tag is enhanced with animations specified in the component's props. What confuses me is ho ...

javascriptreactjsnext.js

Symfony using Vite with Vue 3 encounters an error: Uncaught ReferenceError - exports is undefined

Currently, I am in the process of developing a Symfony 3 Application with Vite and Vue3 integrated with TypeScript. To replace Symfony's Webpack Encore, I opted for the Vite Buildtool using this convenient plugin: https://github.com/lhapaipai/vite-bu ...

javascripttypescriptvue.jssymfonyvite

The CSS division is perplexingly dimensionless

As I work on finalizing a client's webpage, I encountered an issue with applying vertical padding to one of the div elements. Upon inspecting the element using Chrome's dev tools, I found that it had "NaN x NaN" dimensions. This prevented me from ...

htmlcsstwitter-bootstrap

Steer clear of altering line spacing in CSS

Here is the HTML structure that I am working with: <div id="id1"> <h1>my name </h1><h3><a href="mailto:myemail_id"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff92869a929e9693969bbf878685d19 ...

htmlcss

Nested loops displaying modal when button is clicked - Utilizing JQuery and Ajax

I'm facing a challenge with 3 questions all related to the same issue that I need help solving: 1 How can I create a loop within another loop to extract price_history from a .json file and display the 7 results inside the modal using the template sto ...

javascriptjqueryjsonajax

Utilizing array.filter() to retrieve objects with values containing specified keywords

In my node.js project, I have an array named products that is structured as follows: [ { product_id: 'adidas-training-shoes', title: 'Adidas Training Shoes', description: 'description', brand: 'brand&a ...

javascriptarrays

What is the best way to implement filtering on a click event in React Three.js?

I recently explored a 2 cubes sample, and I encountered an issue. When clicking on one cube, both it and the cube behind it get clicked at the same time. Is there a way to make sure that only the nearest cube is clicked or hovered? In simpler terms, when ...

javascriptreactjsthree.jsreact-three-fiber

Sending an array to a component in Angular without the need for a controller

How can I pass an array to a component in Angular 1 without being inside a controller (using a component-only approach)? Currently, my starting point is: <user-list users="users"></user-list> The 'users' variable is a JavaScript arr ...

javascriptangularjs

"There is an issue with the payload size: request entity is too large. What is the solution for handling this in Nest

I am facing an issue where I need to send a request containing a large base64 string, approximately around 2 MB. However, the server keeps throwing an error message. How can I prevent this error from occurring: [Nest] 1666 - 11/01/2021, 1:50:58 PM ERRO ...

javascriptnode.jsexpressnestjs

Determining the optimal route to retrieve the key value in JSON format?

Here is a sample json data: var countryData = { "USA":{ "W": 97.0, "N":42.5, "E": 130.0, "S": 20.0, "vert_%": 170 }, }; While I know how to access the values: var myValue = countryData.USA.W; How can I access a specific key like W or USA? ...

javascriptjqueryjson

Decoding the build ID in NextJS: A step-by-step guide

When working with NextJS, there's the option to generate a build ID as mentioned in the documentation here: https://nextjs.org/docs/app/api-reference/next-config-js/generateBuildId Alternatively, it is also possible to retrieve the build ID based on ...

javascriptgitnext.js

How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner? HTML <div class="info player"> <div id="job" style="display:none;"><span>Jobname</span></div> <div i ...

css

Ways to locate two div class elements that are generated dynamically

I am looking to dynamically create 2 divs in different locations. One for displaying information and another for editing information. I want to be able to delete both divs with the same class when using the delete button. Since they are located in differe ...

javascriptjqueryfrontend

The selectors in NgRx store are failing to retrieve data from the main global store

As I delve into the world of ngrx, I find myself struggling to fully understand and implement it effectively within my application. Recently, I integrated ngrx version 8.3 into my project in hopes of organizing my state management efficiently. My goal is ...

javascriptangulartypescriptngrxngrx-store

How can you access the bound value in Vue JS?

I am struggling to access and display the value of model.title in the console when a click event is triggered. In my json file, there are a total of 3 records. The first model's title is IRIS. When I click on the link, I want it to be displayed in the ...

javascriptvue.js

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

javascripthtmlcssresponsive-designcross-browser

Leveraging the power of history.js alongside Google Analytics

After reviewing the choices provided on this page: https://github.com/browserstate/history.js It seems that there is no option available to configure the plugin to send page view data to Google Analytics. This lack of feature complicates tracking user n ...

jqueryhistory.js

Troubleshooting problem with GZIP in Angular 2 application deployment

I have developed an Angular 2 TypeScript application. I am using Firebase for hosting and Cloudflare for optimizing speed, caching, and security. When checking the browser header, it indicates: accept-encoding:gzip, deflate, sdch, br The app.js file has ...

javascriptangulargzipsystemjscloudflare