Display the contents of a specific tab by showcasing them as its children

My goal is to create a user-friendly interface with a list of tabs, each representing a category. The content related to each tab should be displayed in close proximity to the tab itself, creating a visual hierarchy akin to parent and children.

This is how I've attempted to achieve this:

<div id="teams" class="tabbable tabs-left">
    <div class="container">
        <div class="row">
            <nav class="nav flex-column col-md-1 teamTab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" href="#category1-tab" data-toggle="pill" role="tab">Category1</a>
                <a class="nav-link" href="#category2-tab" data-toggle="pill" role="tab">Category2</a>
                <a class="nav-link" href="#category3-tab" data-toggle="pill" role="tab">Category3</a>
            </nav>
            <div class="tab-content col-md-11">
                <div class="tab-pane active" id="category1-tab" style="padding-left: 60px; padding-right:100px">
                    <h5 class="card-title">Name</h5>
                    <p class="card-title">Position</p>
                </div>
                <div class="tab-pane" id="category2-tab">
                    <h5 class="card-title">Category 2 Name</h5>
                    <p class="card-title">Position</p>
                </div>
                <div class="tab-pane" id="category3-tab">
                    <h5 class="card-title">Category 3 Name</h5>
                    <p class="card-title">Position</p>
                </div>
            </div>
        </div>
    </div>
</div>

Presently, all tab contents are displayed in the same location. My intention is for each tab's content to appear next to its respective tab with a slight offset below.

--Category 1

           Name
           Position

Category 2

          Category 2 Name 
          Position

Category 3

          Likewise, clicking here should display its associated content 
          in this designated area rather than at the top.
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're struggling with displaying your Tab content, give this solution a try: Add the .child class to all your content DIVs that have the class .tab-pane, and make sure to remove any inline styles.

.child {
  padding-left: 60px; 
  padding-right:100px
}

Next, implement this JavaScript code to show the Tab content beneath the Tab title.

$(document).ready(function() {
   $('.nav-link').each(function(){
      var content_id = $(this).attr('href');
      $(this).after($(content_id).hide());
      if($(this).hasClass('active')) {
         $(content_id).show();
      }
   });

    $('.nav-link').on('click', function(){
        var content_id = $(this).attr('href');
        $('.tab-pane').hide();
        $(content_id).show();
    });
});

Give it a shot and hopefully it resolves your issue. You can also view a working version of the code here.

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

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

I am struggling with sending multiple selected checkboxes from HTML to Java using jQuery/Ajax. The issue is that when I check the result in Java, instead of getting the values I selected (e.g., National, State), I get "activityRangeCBs[]". Here is the HTM ...

javajqueryhtmlajax

What is the technique for using JavaScript to implement styling on a <td> within an HTML table?

Can someone help me with applying JavaScript to an entire column in an HTML table? Here is the script I am currently using: I want to insert a line break after each comma in the Message column of the table. Can anyone point out what I'm doing wrong? ...

javascriptjqueryhtmlangularjs

Mobile Chrome allows users to utilize the IFrame player API for enhanced video

Currently, I am working on creating a mobile website where I plan to include some YouTube videos using the IFrame player API (https://developers.google.com/youtube/iframe_api_reference). My main goal is to have the video start playing only after the user ...

javascripthtmlgoogle-chromemobileyoutube

The image slide change feature ceases to function properly when incorporating two separate functions

I have a function that successfully changes the image of a container every 5 seconds. However, I am facing an issue when trying to add 2 containers side by side and change their images simultaneously. When I run the functions for both containers, only one ...

javascripthtmlcss

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

Is the use of the auto image attribute height/width impacting rendering performance?

Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...

htmlcssimage

Presentation for a div's background image with the use of jQuery

My header contains a large div with text contents and boxes, along with a background image. Now I want to create a slideshow for this div's background. Does anyone know how to make a slideshow for a div's background image? I've searched ex ...

javascriptjqueryhtmlbackgroundslideshow

Image encoded in base64 not appearing on the screen

Hey there, I'm currently working on implementing a jQuery image uploader that generates a base64 code when an image is selected. function readImage(input) { if (input.files && input.files[0]) { var FR= new FileReader(); FR.onload ...

javascriptjqueryhtmlimage

What is the best way to access Sass variables in a different Sass file?

I'm currently working on a WordPress theme and running into an issue with utilizing SASS from another file using the @use method. For those of you who may not know, the @import rule method will soon be deprecated which is why I am trying to implement ...

csssass

The error message of "Node v0.10.37 is not compatible with Autoprefixer"

When attempting to access localhost:3000, an error is thrown stating: ActionView::Template::Error (Autoprefixer doesn’t support Node v0.10.37. Update it.): I have tried updating node, but there are no updates available. node -v # v8.1.3 nodejs -v # v0 ...

ruby-on-railsruby-on-rails-4bootstrap-4

JavaScript may fail to execute properly if the <!doctype html> declaration is not inserted in the correct syntax

While building a web page, I encountered an issue with my JavaScript code not working when using <!doctype html> or any type of <!doctype> at the top of the page. Can someone explain this error? After researching online, I learned that <!do ...

javascripthtml

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

I have a setup using material UI where I have a grid positioned on top of a Paper element. Within the grid, there is a text input field in the first column that I want to match the height of the paper element and be aligned with its left border. I have tri ...

cssreactjsmaterial-ui

Horizontally align the label with the Checkbox

Hi everyone, I'm new to this forum and I've encountered a problem that I am struggling to resolve. The issue lies with a table containing a checkbox list. Initially, everything looks fine when I use: display:inline-block; However, on small ...

jqueryhtmlcsscheckboxtext-align

"Trouble arose when I tried to incorporate additional functions into my JavaScript code; my prompt feature is not

As a beginner in HTML and JS coding, I am working on creating a page that prompts user input for a name and then executes animations using radio buttons. However, after adding functions for radio button changes, my prompt is no longer functioning properly. ...

javascriptjqueryhtmlcss

Having trouble utilizing Datatables to display CSV data?

Within the given app.py file, there is an issue with rendering csv content in datatable format. Currently, the csv data is being displayed as a single column in the output table. I have attempted to split the csv content into separate columns using various ...

pythonpandasflaskbootstrap-4datatables

What is the proper application of counter-reset when utilizing CSS counters to automatically number headings?

In my quest to automatically number headings with multiple levels of hierarchy in an HTML document using CSS, I have encountered various examples online that heavily rely on counter-reset. However, despite testing it in different configurations, I haven&ap ...

htmlcsscss-counter

Using JQuery to switch classes and activate events

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <span class="fake_h">Too</span> </body> <script> $('.fake_h').click(function() { $(this).addClass( ...

javascriptjqueryhtml

Move the Bootstrap button to the right side of the div, extending beyond its boundaries

My bootstrap page seems to be experiencing an issue where the buttons within a div are shifted slightly to the right without any clear reason: https://i.sstatic.net/3xlMC.png https://i.sstatic.net/yFLFM.png https://i.sstatic.net/gh686.png The div in qu ...

htmlcssbootstrap-4

How to position the navigation bar to the right using bootstrap

I have been experimenting with moving the navigation bar to the right side of the screen in bootstrap4 by using float: right; on the nav a element, but it doesn't seem to be having any effect. I am developing my project using a codepen app. Here is t ...

htmlcsstwitter-bootstrapweb

Converting a table into JSON format

I'm working on developing a live application that will showcase data in a table format like the one below: Machine Production Scanned Delta Mach 1 2500 1000 1500 Mach 2 1500 1300 200 Mach 3 6500 5000 1500 Mac ...

pythonhtmlsqljson