Step-by-step Guide: Building a Nested Bootstrap Navigation Tabs Component on a Webpage

Within a page, I have integrated nested bootstrap navs components. The issue arises when clicking on "Nested Tab 2," which functions correctly, and then switching to "Nested Tab 1" where the tab content is not displaying properly.

I am uncertain if there is something missing within the code or if additional JS Events like "shown.bs.tab" are required. There may also be a conflict with the "slick carousel."

Below is the relevant code snippet:

function navSlick() {
    const mySlider = $('.js-slider');
        mySlider.slick({
            infinite: true,
            focusOnSelect:true,
            slidesToShow: 2,
            slidesToScroll:1,
            arrows: false,
            dots: false,
        });
}
navSlick();
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdfc5ddc5d9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbca3a6aca4e2acaebda0babcaaa38ffee1f7e1fe">[email protected]</a>/slick/slick.css"/>

  <div class="container mt-4">

    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" data-toggle="tab" role="tab" href="#tab1">Tab 1</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" data-toggle="tab" role="tab" href="#tab2">Tab 2</a>
      </li>
    </ul>

    <div class="tab-content mt-2">
      <div class="tab-pane fade show active" role="tabpanel" id="tab1">
        <ul class="nav nav-tabs js-slider" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link active" data-toggle="tab" role="tab" href="#nested-tab1">Nested Tab 1</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" data-toggle="tab" role="tab" href="#nested-tab2">Nested Tab 2</a>
          </li>
        </ul>

        <div class="tab-content mt-2">
          <div class="tab-pane fade show active" role="tabpanel" id="nested-tab1">
            <h3>Nested Tab 1 Content</h3>
          </div>
          <div class="tab-pane fade" role="tabpanel" id="nested-tab2">
            <h3>Nested Tab 2 Content</h3>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" role="tabpanel"  id="tab2">
        <h3>Tab 2 Content</h3>
      </div>
    </div>

  </div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea809b9f8f9893aad9c4dfc4db">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8c81819a9d9a9c8f9eaedac0d8c0dc">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27544b4e444c0a444655485254424b6716091f0916">[email protected]</a>/slick/slick.min.js"></script>
javascripttwitter-bootstrapbootstrap-4slick.js

Answer №1

Latest Updates: The issue has been resolved after updating the javascript. Here is the updated code snippet.

If you have any other solutions, feel free to share them.

function navSlick() {
    const mySlider = $('.js-sliders');
    const navLinkInner = $( ".nav-link--inner" );
    const navCustomTabs = $('.nav-custom--tabs a[data-toggle="tab"]');
    mySlider.slick({
      infinite: false,
      focusOnSelect:true,
      slidesToShow: 2,
      slidesToScroll:1,
      arrows: false,
      dots: false,
      initialSlide:0
    });
    /*fixes for my question below*/
    navLinkInner.on( "click", function() {
      navLinkInner.removeClass('active');
    });
    navCustomTabs.on('shown.bs.tab', function (e) {
      mySlider.slick('setPosition');
    })
}
navSlick();
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a5948780c160e160a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e2d32373d35733d3f2c312b2d3b321e6f7066706f">[email protected]</a>/slick/slick.css"/>

<div class="container mt-4">
    <ul class="nav nav-tabs nav-custom--tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" data-toggle="tab" role="tab" href="#tab1" aria-selected="true">Tab 1</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" data-toggle="tab" role="tab" href="#tab2" aria-selected="false">Tab 2</a>
      </li>
    </ul>

    <div class="tab-content mt-2">
      <div class="tab-pane fade show active" role="tabpanel" id="tab1">
        <ul class="nav nav-tabs js-sliders" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link nav-link--inner active" data-toggle="tab" role="tab" href="#nested-tab1" aria-selected="true">Nested Tab 1</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link nav-link--inner" data-toggle="tab" role="tab" href="#nested-tab2" aria-selected="false">Nested Tab 2</a>
          </li>
        </ul>

        <div class="tab-content mt-2">
          <div class="tab-pane fade show active" role="tabpanel" id="nested-tab1">
            <h3>Nested Tab 1 Content</h3>
          </div>
          <div class="tab-pane fade" role="tabpanel" id="nested-tab2">
            <h3>Nested Tab 2 Content</h3>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" role="tabpanel"  id="tab2">
        <h3>Tab 2 Content</h3>
      </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b011a1e0e19122b58455e455a">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5f455d4559">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a697673797137797b68756f697f765a2b3422342b">[email protected]</a>/slick/slick.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

Updating state array within reducer leads to duplicate execution of calculations

const updateCartReducer = (state, action)=>{ console.log('running the updater function') const existingItemIndex = state.items.findIndex( (item) => item.restaurant === action.item.restaurant && ...

javascriptreactjsreact-hooks

Generate a fresh Date/Time by combining individual Date and Time components

I have set up a form to gather dates from one input box and times from another. var appointment_date = new Date(); var appointment_start = new Date("Mon Apr 24 2017 20:00:00 GMT-0400 (EDT)"); var appointment_end = new Date("Mon Apr 24 2017 21:30:00 GMT- ...

javascriptdatereactjsdatetime

Is it possible for JavaScript/React to observe the movement of elements on the webpage?

I'm searching for a solution to detect if an element moves on the screen. Currently, I have an absolute positioned div (acting as a download overlay) that appears when a document is clicked on my website. However, I want it to disappear whenever the d ...

javascriptreactjsdomeventslistener

Is it possible to retrieve and display an object from an API using its unique ID?

I created a straightforward application. The main page displays a list of movies fetched using an API, and upon clicking on a particular movie, it leads to a new page with detailed information about that movie. On the details page, another API call is ma ...

javascriptfunctionapivue.jsurl

Array Filtering Results in an Empty Array of Objects

I'm currently attempting to filter out all objects from the projects array that do not appear in the savedProjects array, but I'm ending up with an empty result. Could it be that I am approaching the filtering process incorrectly? Here's my ...

javascriptarraysexpresswebserver

Removing an individual HTML element within a form using JavaScript Fetch() in the presence of multiple components

The Situation Having a form that includes image components generated from a MySQL database with PHP, I've implemented javascript fetch() functionality on different pages of the website to enhance user experience. However, in cases where the functiona ...

javascriptajaxfetch-api

When ran automatically as a cron job, the JavaScript script fails to establish a connection with MongoDB

As I connect to mongodb (on a Ubuntu machine) from a js script, everything runs smoothly when I execute the command from the command line (node <name of the script>). However, when I try executing the same command from cron, the connection times out: ...

javascriptnode.jsmongodbcrondbconnection

Tips on displaying the menu only when scrolling through the webpage

Currently, my website has a right menu that causes overlap with the content on mobile and small devices. To address this issue, I am working on hiding the right menu when the page is stable. The plan is for the menu to appear as soon as the user starts sc ...

javascriptjqueryscroll

What is the best way to group data by a specific value within a nested object when using ReactJS material-table?

I have a unique scenario where I possess an array of individuals featuring a nested object known as enterprise. My objective is to effectively group these individuals by the value of company.name within the confines of the Material-Table. const people = [ ...

javascriptreactjsmaterial-uimaterial-table

Incorporating tab navigation and drawer navigation in a React Native Expo application

I am encountering a warning in my react native expo app that uses react navigation 6. Even though I am able to display the tabs and the drawer, I keep getting this console alert: Found screens with the same name nested inside one another. Check Home, Home ...

javascriptreactjsreact-nativereact-navigation

What is the best way to check if a user input matches any of the items saved in an array?

I'm working on coding a hangman app and I have a question. How can I compare the user input "userGuess" to the array "array" that consists of letters split from the randomly selected word "word"? If the "userGuess" matches any of the values in the "a ...

javascriptarraysuser-input

Having issues with the script not functioning when placed in an HTML document or saved as a .js file

Even though the database insertion is working, my script doesn't seem to be functioning properly. The message "successfully inserted" appears on the saveclient.php page instead of the index.html. In my script (member_script.js), I have placed this in ...

javascriptphpajax

Unable to establish connection through MQTT 1884 protocol

Currently, my website's messaging system is powered by MQTT. While everything is functioning smoothly on my local machine, I encounter an error when trying to use the system on the production site: vendor.bbaf8c4….bundle.js:1 WebSocket connection ...

javascriptnode.jsangularmqttpaho

"We are unable to set a value for a global array unless we utilize the .push() method

It's puzzling that I can't populate a global array without using the .push() method. (function() { var globalEmail = []; var testUpdate = function() { var arr = [1, 2, 3]; if (globalEmail.length > 1) { gl ...

javascriptnode.jsecmascript-6

What could be causing the responsive grid to not stack items properly?

I'm struggling to make my page responsive on mobile devices. The elements are not stacking as intended, but rather aligning side by side. How can I fix this issue? My attempts to adjust spacing, padding, and flex-grow values have not yielded the desi ...

javascriptreactjsmaterial-uiresponsive-designgrid

Dealing with network issues when submitting a form

Is there a smooth way to handle network errors that may arise during the submission of an HTML form? It is important for me not to have the browser cache any information related to the form, but I also want to ensure that the user's data is not lost i ...

javascripthtml

jqgrid's date restriction is set to November 30th, 1999 at midnight

I have a table displaying DATETIME values. However, after editing the datetime value, it always changes to "1999-11-30 00:00:00", both in jqgrid and the database, regardless of the date entered. [Tue Mar 12 11:39:28 2013] [error] [client 171.43.1.4] PHP N ...

phpjavascriptjqueryjqgrid

`Adjusting function calls based on the specific situation`

On my webpage, I have implemented a tab system where clicking on a tab displays the corresponding content below. This functionality is controlled by a JavaScript/jQuery function called 'changeTab'. Now, I want to set up individual JavaScript fun ...

javascriptjquery

React: The peculiar contradiction of useEffect with eventHandler props

Having trouble with this specific example. The issue arises with an Input component that includes an onChange prop to manage internal data changes. Under normal circumstances, if the value is updated externally, the onChange prop does not trigger since t ...

javascriptreactjsreact-hooksuse-effect

Sending data from JavaScript to PHP using the POST method

I recently learned that using ajax for data passing doesn't require a form or hidden value. I'm hoping to find an example to better understand how it works. index.js: function collectData(r) { // identifies the row index var i = r.pare ...

javascriptphpjqueryajax