The Bootstrap Nested List Group feature displays both items within the Tab Content section, providing clarity and

I am currently working on implementing a page navigation feature in HTML using the Bootstrap List-group class.

Here is how the feature should function:

Clicking on Home should display only link 1, and clicking further on Link 1 should show only Page 1.

In a similar fashion, selecting Profile should reveal only link 2, then clicking on Link 2 should display Page 2.

The links are functioning correctly and displaying the appropriate items.

The issue I'm facing is that both Link 1 and Link 2 are appearing simultaneously when either the Home or Profile link is clicked.

Thank you for your help!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c18021a021e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="list-group" id="list-tab" role="tablist">
        <a id="list-home-page" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
        Link 1
        </a>
        <a id="list-profile-page" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
        Link 2
        </a>
      </div>
    </div>
  </div>
</div>
<br><br>

<div class="tab-content" id="nav-tabPage">
  <div class="tab-pane fade show active" id="aa" role="tabpanel" aria-labelledby="aa">
    Page 1
  </div>
  <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="bb">
    Page 2
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5a4058405c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Answer №1

From reviewing your code, it appears that there may be a confusion between two concepts while attempting to create this navigation.

Typically, list-group and list-group-item are utilized within unordered list elements as shown below:

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
</ul>

Although you can still use the same HTML elements (ul and li) if desired, you will need to adjust the classes in bootstrap when using them for navigation purposes.

This involves not only the styling impact but also potential differences in the JS functionalities used.

For instance:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

I recommend referring to the documentation starting with this section (link provided below) and adjusting your code accordingly.

Bootstrap 4 Tab - JavaScript Behavior

In terms of tabs, they are typically ideal if you want users to remain on one page while displaying different layers of content on that single page. However, for navigation between separate pages such as:

  • example.com/home
  • ../about
  • ../contact

It might be more suitable to consider utilizing the navbar instead.

Bootstrap 4 - Navbar

One thing to keep in mind is avoiding simply copying code from the documentation and inserting your own values. While it may function, it won't provide a deep understanding of how things work.

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

An error has occurred and the image is unable to be viewed on

I recently set up a local web server on my Windows 10 desktop PC and encountered an issue where the text on my webpage is displaying correctly, but the images are not showing up. To view the website, I am using this link Both index.asp and btnCancel.gif ...

Trouble with CSS styling for focused input fields

Attempting to style a form by Patriot with CSS, I encountered an issue. input#card-month:focus ~ label.card-label.label-cardExpiryYear { font-size: 20px !important; /* This works fine */ } input#card-month:focus ~ label.card-label.label-cardExpiryMont ...

Adjusting the size of inline SVG elements on the fly

I'm working with an SVG that is being displayed inline like this: <div className="app-details__icon-large" dangerouslySetInnerHTML={{__html: svg }} />. I specifically need to render it this way (not using an img tag or as a background) in order ...

Record the selected list item chosen by the user to optimize caching

There's a list of items with a "change view" option for grid, list, and compact views. By default, the grid view is displayed when the user opens the link (which has already been achieved). Now, my goal is to remember the user's choice of view so ...

Tracing a path with a snapping motion using my thumb

Before we begin, let's take a look at the example below. The functionality of this component should mimic that of an input type range. However, I am facing some challenges in calculating the step value and snapping the thumb onto the trail based on t ...

Using JQuery .ajax to store information in the database

I'm in the process of saving 2 different pieces of information into the database using JQuery and the .ajax function. Specifically, I need to save the postID and the userID in a WordPress environment. While I have a good understanding of most of the f ...

Encountering blank space in the first table row after a page break when creating a PDF using dompdf

Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...

Is it possible to nest a bootstrap "btn-toolbar" to create horizontal scrolling on smaller screens with Bootstrap 4?

I am utilizing the "btn-toolbar" class from bootstrap to contain multiple "btn-group" class dropdown buttons on a single line. For smaller screens, I want the btn-toolbar div to have a fixed width so that it can be horizontally scrollable. To achieve this, ...

What is the impact on performance when using absolute versus relative URLs in an Ajax internal call?

There are currently two ways to achieve this; using relative and absolute URLs: Absolute URL on the same server: $.ajax({ url: 'http://api.host.net/customers' }) Alternatively, you can use a relative URL on the same server: $.ajax({ ...

What is the best way to vertically center align the content inside a div with a height of 100vh?

https://i.sstatic.net/RABhH.jpg .components{ background-color: #1DA1F2; text-align: left; height: 100vh; padding: 20px; } With the current CSS code, I've set the outermost div (.components) to have a height of 100vh but I'm h ...

Discover the Color's Value in Relation to a Different Color

When it comes to my CSS, I like to use .scss to make as many variables as possible. It's easy to create a variable for one color, like $primary-color. From there, I want to work with different shades of that color, which I can easily pinpoint using Ph ...

Issue with the alignment of a sidebar on a website's html page

Last week, I embarked on the journey to learn HTML and CSS. To put my skills to the test, I decided to recreate an old web page using what I have learned so far. The specific page I am trying to emulate can be found here: However, I am currently facing so ...

Troubleshooting: Datatables column filtering not functioning properly

Big shoutout to Stryner for sharing his code on how to disable a search/filter on a specific column in a datatable. It was exactly what I needed. However, I'm facing an issue where the inputs in the bottom TH cells are not triggering any action on bl ...

Deliver HTML emails with PHP including files attached

Recently, I encountered an issue: In the past, I sent HTML emails using PHP with a header that contained Content-type: text/html; However, I have now implemented functionality to include attachments. This required me to change the line to Content-Type: ...

Storing a webpage in HTML with the use of @import function in CSS

I'm looking to save an entire HTML page, but I'm running into an issue with the CSS file that includes the line: import url('someOtherCss.css'); When attempting to save the page using Firefox or Chrome with 'File->Save Page a ...

What is the correct way to format text as superscript?

In my application, I have noticed that there are a lot of numbers and letters displayed in superscript. For example, using <span style="vertical-align: super;">3</span> results in X<sup>3</sup>. However, simply using the sup tag als ...

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...

Can someone show me how to verify in PHP (using codeigniter) if the following two rows contain any data?

I need to verify whether the following TWO rows or ID are not NULL. If there are no consecutive TWO rows or ID, then the income will stay at zero. foreach ($data as $row) { if(($row->id + 2) != NULL) //I am unsure about the c ...

A guide on developing a Website Tour using jQuery

Exploring ways to create a website tour for first-time users? I've been searching for free website tour plugins and came across this one: http://tympanus.net/codrops/2010/12/21/website-tour/ However, the instructions provided are quite brief, making ...

Utilizing jQuery's multiselect feature in the user registration form of a web2py website

Is there a way to incorporate jquery.multiselect.js into the db.auth_user table or default/user/register page? I have been trying to figure it out, but not sure how to modify the html page or controller to make it work. auth.settings.extra_fields['au ...