Creating nested tabs with Bootstrap: A step-by-step guide on adding tabs within tabs

I am encountering a challenge with nested tabs. I am utilizing Bootstrap and not using custom CSS. Any assistance would be greatly appreciated.

<div class="container-fluid">

            <!-- Tabs -->
    <ul class="nav nav-tabs">
      <li class="active">
        <a id="1" href="#">Tab 1</a>
      </li>
      <li><a id="2" href="#">Tab 2</a></li>
      <li><a id="3" href="#">Tab 3</a></li>
    </ul>


    <div class="tabContent" id="tabContent1">
         Tab Content 1
        <ul class="nav nav-tabs inertabs">
          <li class="active">
            <a id="11" href="#">T11</a>
          </li>
          <li><a id="12" href="#">T12</a></li>
          <li><a id="13" href="#">T13</a></li>
          <li><a id="14" href="#">WK</a></li>
          <li><a id="15" href="#">MND</a></li>
          <li><a id="16" href="#">YTD</a></li>
        </ul>


    <div class="tabContent1" id="tabContent111">
      Tab Content 11
    </div>
    <div class="tabContent1" id="tabContent112">
      Tab Content 12
    </div>
    <div class="tabContent1" id="tabContent113">
      Tab Content 13
    </div>


    </div>  



    <div class="tabContent" id="tabContent2">
      Tab Content 2
    </div>


    <div class="tabContent" id="tabContent3">
      Tab Content 3
    </div>  

</div>


<script type="text/javascript">
    
        $('.nav a').click(function (e) {
        $(this).tab('show');
      
      var tabContent = '#tabContent' + this.id; 
      
      $('#tabContent1').hide();
      $('#tabContent2').hide();
      $('#tabContent3').hide();

      $(tabContent).show();
    })



        $('.inertabs a').click(function (e) {
        $(this).tab('show');
      
      var tabContent = '#tabContent' + this.id; 
      
      $('#tabContent11').hide();
      $('#tabContent12').hide();
      $('#tabContent13').hide();

      $(tabContent).show();
    })


</script>

https://i.sstatic.net/z06kI.png

I have made progress on the issue, but there is a specific requirement remaining. When Tab1 is clicked, I need Tabs 2 and 3 to remain hidden. However, when an inert Tab like Tab11 is clicked, it should function like the parent tabs without hiding them. Any insight would be appreciated.

Your assistance is greatly appreciated.

Answer №1

Here is a solution that worked for me:

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
<body>
  <div class="container-fluid">
    <!-- Tabs -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item"><a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a></li>
      <li class="nav-item"><a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a></li>
      <li class="nav-item"><a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a></li>
    </ul>
    <div class="tab-content" id="myTabContent">
          <div class="tab-pane p-4 fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item"><a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1-1" role="tab" aria-controls="tab1-1" aria-selected="true">Tab 1</a></li>
              <li class="nav-item"><a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab1-2" role="tab" aria-controls="tab1-2" aria-selected="false">Tab 2</a></li>
              <li class="nav-item"><a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab1-3" role="tab" aria-controls="tab1-3" aria-selected="false">Tab 3</a></li>
            </ul>
            <div class="tab-content" id="myTabContent">
              <div class="tab-pane p-4 fade show active" id="tab1-1" role="tabpanel" aria-labelledby="tab1-tab">content 1.1</div>
              <div class="tab-pane p-4 fade" id="tab1-2" role="tabpanel" aria-labelledby="tab2-tab">content 1.2</div>
              <div class="tab-pane p-4 fade" id="tab1-3" role="tabpanel" aria-labelledby="tab3-tab">content 1.3</div>
            </div>
      </div>
      <div class="tab-pane p-4 fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">content 2</div>
      <div class="tab-pane p-4 fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">content 3</div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

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

Ways to elevate a tone on an HTML webpage

When I start my Python server from the command prompt, any print statements that are reached will be displayed. How can I make sure these messages show up on the template login.html? Views.py def home(request): templatename="login.html" ...

What could be the reason for my function not being executed in this particular scenario with my calculator HTML code?

Memory = "0"; Current = "0"; Operation = 0; MAXLENGTH = 30; alert("yea"); function AddDigit(digit) { alert("yea"); if (Current.length > MAXLENGTH) { Current = "Aargh! Too long"; } else { if (eval(Current) == 0) { Current = dig; ...

Conceal image and substitute with a different image using JavaScript

My query pertains to JavaScript: how can I create an effect where clicking the jump-down button opens a text box and causes the button to change direction and rotate? I am considering using two photos - one hides when the jump-down button is clicked, and ...

bxSlider adds in an empty slide after deleting an image

Whenever I click a link in my navigation, I want to remove certain images from the page. I tried implementing a solution, but now I have two empty spaces where the images used to be. How can I remove those as well? I searched on Stack Overflow for a soluti ...

Customizing padding and margin in material-UI styles

Having issues with excessive padding and margin inside my tab component, even after trying to override it. I've followed some suggestions on StackOverflow but none seem to work. Here's how it looks: https://i.stack.imgur.com/Bgi3u.png Here is th ...

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows: <div class="panel panel-default table-responsive fixedHeader"> <!-- Table --> &l ...

Creating a 3x3 grid with CSS grid is great, especially when you want to place items in specific columns within the grid

I'm attempting to design a layout that has a unique structure: https://i.sstatic.net/dCLoPm.png The blue rectangles are represented by divs. It's like a 3x3 grid, but with spaces in the 3rd and 4th columns of the grid. How can I incorporate th ...

Expanding and hiding content using jQuery while also utilizing cookies for persistence

Hey there! I have a piece of code that I'm working on and could use some help. I'm trying to create a cookie that can remember the current state of a div even if the user reloads the page. Any assistance would be greatly appreciated! jQuery(fun ...

Trouble with launching Semantic UI modal

I have implemented a button using Semantic UI and set up a click event to open a modal when clicked, but nothing is happening. When I click on the link, there is no response. I'm unsure what the issue might be. Below is the code for the button: < ...

Customize div styles according to the website domain

I want to dynamically change the header of my website based on whether it is in dev QA or production environment. Below is the HTML code: <div id="wrapper"> <form id="form1" runat="server"> <div class="wrapper"> <div> ...

How to efficiently utilize images with the VueJS Bootstrap carousel technique

My issue revolves around a specific requirement. Obtaining a list of images from the backend. The goal is to pass these image names to the carousel for image display. Showcased below is the code snippet I am working with. <template> <div cla ...

Personalized AngularJS required text

After utilizing the built-in AngularJS directive required and encountering a validation error, I receive a small popup near the field displaying "Please fill out this field". My issue lies in needing the text to be displayed in another language. How should ...

The change event for Bootstrap 4 switches is not functioning as expected

I am facing an issue with multiple Bootstrap 4 switches that are dynamically loaded onto the page using JS append. I need to call a function when the switch changes. The example below works fine when the switches are added in HTML, but it doesn't work ...

How can I retrieve the transformation matrix for a DOM element?

Is there a way to retrieve the transformation matrix of a DOM element similar to how we can do it with canvas context? Does the DOM provide a getTransform() method for this purpose? ...

A guide on layering .ogg video with .png image using HTML5 and CSS3

I am having difficulty achieving the desired effect, even when using z-index and position:absolute. My goal is to overlay a .png image on top of a video, while still allowing the transparent parts of the .png file to reveal the video playing in the backg ...

What are some ways to decrease the dimensions of my dateTimePicker?

I'm looking to decrease the dimensions of my datetime picker box. Here's an image of my current dateTimePicker: https://i.stack.imgur.com/MeJlq.png Below is the component I'm using: import React, { useState } from 'react'; import ...

Scroll horizontally through the number field in Chrome

I have configured a number input field with the text aligned to the right. Scenario: While testing, I discovered that selecting the entire text or using the middle mouse button to scroll within the input field allows for a slight leftward scrolling of ab ...

Rotate the main container element without affecting the content of its children

I'm trying to keep the text centered inside a spinning div by using absolute positioning on the children. I haven't found a solution yet, but I attempted to position it absolutely and disable the transition in the child element. I've include ...

Pattern for identifying Google Earth links with regular expressions

I'm attempting to create a regular expression that can validate whether the URL entered by a user in a form is a valid Google Earth URL. For example: https://earth.google.com/web/@18.2209311,-63.06963893,-0.67163554a,2356.53661597d,34.99999967y,358.13 ...

Why does Chrome keep retrieving an outdated JavaScript file?

Lately, I've been facing a frustrating issue that I just can't seem to figure out. Every now and then, when I update the JavaScript or CSS files for my website hosted on Siteground, Chrome simply refuses to acknowledge the changes. While other br ...