What could be the reason for the malfunction of the nav-tab and tab-pane components?

I'm currently having an issue with my nav-tab and tab-pane implementation. While the nav-tab is working fine, the tab pane does not display the correct content when I click on a second tab. As a beginner in using Bootstrap, I am looking for advice on how to style the content properly. Any help would be greatly appreciated as I am stuck and unable to find a solution.

Below is the code snippet:

<div class="row row-content">
    <div class="col-12">
        <h2>Corporate Leadership</h2>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
            </li>
        </ul>

        //Tab pane content begins here

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade show active" id="peter">
                <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
                <p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="danny">
                <h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
                <p class="d-none d-sm-block">Our CFO, Danny, as he is
                    <em>Everything that runs, wins, and everything that stays, pays! 
      </em></p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="agumbe">
                <h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
                <p class="d-none d-sm-block">Blessed with the most discerning gustatory.
                    <em>You click only if you survive my lick.</em></p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="alberto">
                <h3>Alberto Somayya <small>Executive Chef</small></h3>
                <p class="d-none d-sm-block">Award-winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
                </p>
            </div>
        </div>
    </div>
</div>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

To ensure proper functionality, it is essential to integrate Bootstrap JS and Jquery into your project. Refer to the demo provided below for more details:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row row-content">
    <div class="col-12">
        <h2>Corporate Leadership</h2>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
            </li>
        </ul>

        //Tab pane content starts here

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade show active" id="peter">
                <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
                <p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="danny">
                <h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
                <p class="d-none d-sm-block">Our CFO, Danny, as he is
                    <em>Everything that runs, wins, and everything that stays, pays! 
      </em></p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="agumbe">
                <h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
                <p class="d-none d-sm-block">Blessed with the most discerning gustatory.
                    <em>You click only if you survive my lick.</em></p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="alberto">
                <h3>Alberto Somayya <small>Executive Chef</small></h3>
                <p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
                </p>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

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

Hiding the author, category, and date information from displaying on WordPress posts

After creating a Wordpress blog site and adding the category widget to the right sidebar as a drop down, I realized that I needed to customize its layout in terms of colors and design. However, I am struggling to find out how it can be done, which .php fil ...

phpcsswordpress

Positioning textboxes of varying heights in a vertical alignment, causing one to commence directly below the other

Seeking assistance with creating text boxes for displaying reviews on a website. Each review is contained in a box, with varying heights based on the amount of text. Desired layout is shown in the image below, with black boxes representing review container ...

htmlcss

Using Chrome's tabs.executeScript() method with an included script file

I'm in the process of creating a basic Chrome extension, where I need to actively monitor the AJAX calls being made on the page. Here is the code snippet I have implemented to listen to AJAX calls: var isAjaxWorking = false; //timeout var timeout; ...

javascriptajaxgoogle-chromegoogle-chrome-extension

Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Is there a way to apply a function to a specific class without requiring an id? For example, in CSS hover effects, where multiple elements share the same class but only the one being hovered over is affected. function toggleHeight(elementId, arrowId) { ...

javascriptcss

Modify the parent div's background color on mouseover of the child li

I want to update the background image of a parent div that contains a series of ul li elements. Here is the HTML code I am working with: <section class="list" id="services"> <div class="row"> <ul> <li>& ...

javascriptjqueryhtmlcss

What is the method to remove a specific field from a document in a MongoDB collection?

I have a data collection in my MongoDB database structured like this: { { "_id" : ObjectId("1"), "name" : "ABC", "group" : [ObjectId("11"), ObjectId("12"), ObjectId("13")]} { "_id" : ObjectId("2"), "name" : "DEF", "group" : [ObjectId("21"), Object ...

javascripthtmlnode.jsdatabasemongodb

Ng-outlet is unable to retrieve data from the parent $scope

When using Angular's standard route, I found that child controllers were able to access the parent $scope like this: <div ng-controller="ParentCtrl"> <ng-view></ng-view> </div> However, when switching to the Angular 1.5 C ...

javascriptangularjscomponentsangular-component-router

Validate AngularJS forms by displaying error messages based on the server's response

Within my form, I am checking for the existence of an email address. If the email already exists, I display an error message from the JSON response when the user clicks the submit button. When the email already exists, I receive a 409 error. I am looking ...

javascriptangularjs

Illuminate the rows in a table generated from a parsed text file using PHP

I am facing an issue with my PHP logic for selecting and highlighting rows in a table based on dropdown selection. I have a group of text files that are parsed into a table, and I need to highlight rows that match selections from 5 dropdowns created from t ...

phphtmlparsingselecttext

What is the best way to trigger a snackbar notification when two passwords do not match?

I'm currently developing a full stack application and I am facing an issue with displaying a snackbar in my signup component when the user's password and confirm password do not match. I have been advised to pass the setOpenAlert method as props ...

javascriptreactjsmaterial-ui

Why doesn't the date appear in the Textbox when the TextMode is set to "Date"?

Within my application, there are three textboxes named tbEditStartDate, tbEditStopDate, and tbEditRenewalDate. These textboxes are used to display the start date, stop date, and renewal date of applicants in a Gridview called gvApp. I have implemented a Ro ...

htmlsqlvb.netdatepicker

The technique for handling intricate calls in node.js

My goal is to create a social community where users are rewarded for receiving upvotes or shares on their answers. Additionally, I want to send notifications to users whenever their answers receive some interaction. The process flow is detailed in the com ...

javascriptnode.jsmongodbasynchronous

Using Vue.js with the slot-in attribute

Looking to create a unique vue.js template that functions as described below: <CustomComponent></CustomComponent> should produce <div class="a"></div> <CustomComponent>b</CustomComponent> should result in <div class ...

javascriptvue.js

Creating a unique design with text in a circular format

When styling customer initials within a circle, I sometimes encounter issues with font alignment, as seen in the image below where EW is not centered properly. In this code snippet, I am using border-radius to create circular shapes for displaying custome ...

angularjsangularcss

WebClient executes JavaScript code

On my aspx page, there are JavaScript functions that handle paging. I am currently using the WebBrowser control to run these JavaScript functions by calling WebBrowser1_DocumentCompleted. WebBrowser1.Document.Window.DomWindow.execscript ("somefunction(); ...

c#javascript.netbrowserwebclient

Adjust the dimensions of an image to maintain a 16:9 aspect ratio

After spending the entire day trying to resize the uploaded image to a 16:9 aspect ratio, this is the closest I have come. const resizeResult = await manipulateAsync( uploadResult.uri, [ { resize: uploadResult.width > uploadResult. ...

javascriptreactjsreact-nativeexpo

Updating website links in real time with the power of jquery

Is there a way to dynamically change the parameter of a link? For example: Link1 Link2 Link3 By default, their URL is ?item=text, so link1 would be href="?item=link1", etc. But when I click on link1, the URLs of link2 and link3 should change to include ...

javascriptjquery

Exploring the Worldwide Influence of TypeScript, React, and Material-UI

I am currently following an official tutorial on creating a global theme for my app. In my root component, I am setting up the global theme like this: const themeInstance = { backgroundColor: 'cadetblue' } render ( <ThemeProvider theme ...

javascriptreactjstypescriptmaterial-ui

Challenge with modifying CSS variable names in Angular SSR

Recently, I noticed that some of my CSS variable names are being changed to something else on the server-side rendering build, causing them not to work as expected. An example of this is: .color-black-75 { color: var(--black-75-color); } In my styles. ...

cssangular

How can I center an element on the screen using CSS positioning?

Here is the CSS code that I am using, defined in the React Material-UI withStyles method: const styles = (theme: Theme) => { return ({ display: { transition: theme.transitions.create('transform') }, dis ...

cssreactjsmaterial-uitranslate