Issues Arise with Bootstrap Side Navigation Tab Content Navigation

As someone new to web development, I am currently working on a web app and struggling with the page design. Specifically, I am attempting to create a fixed side navbar with content displayed in the second column of a split row. Below is the code I have managed to put together so far.

The navigation works fine the first time - if I click on all the buttons sequentially, I see the desired content body. However, I am unable to click on the links a second time to display the relevant content on the side. What am I doing wrong here? Any help would be appreciated!

<div class="row">
<div class="col-2 bg-light py-0 px-1 sticky-top">

    <ul class="nav flex-column">
      <li class="nav-item text-left">
        <a class="nav-link bg-dark list-group-item text-white active" href="#h_view" data-toggle="tab"> Overview</a>
        <a class="nav-link bg-dark list-group-item text-white" href="#h_my" data-toggle="collapse">
          My History
        </a>
        <div id="h_my" class="collapse">
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_run"> Runs</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_data">Data Update</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_rules">Rules Mapping</a>
        </div>
      </li>
    </ul>

</div>

<div class="bg-white col-10">
  <div class="tab-content pt-2">

    <div id="h_view" class="container tab-pane active">
      This section is for History Overview
    </div>
    <div id="h_my_run" class="container tab-pane fade">
      This section is for Run History
    </div>
    <div id="h_my_data" class="container tab-pane fade">
      This section is for My Data Upload History
    </div>
    <div id="h_my_rules" class="container tab-pane fade">
      This section is for My Rules changes
    </div>

  </div>
</div>
</div>

EDIT: It appears the issue lies within the collapse menu. Upon inspecting the element, I noticed that after clicking on sub-items (Runs, Data Update, Rule Mapping), their class remains active permanently, regardless of where I click next.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Feel free to adjust the settings in this example to suit your needs.

<!DOCTYPE html>
<html lang="en>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Customizing Bootstrap</title>

    <!-- Bootstrap's CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/latest/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/latest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
    <div class="navbar navbar-light bg-faded">
      <ul class="nav navbar-nav">
        <a class="nav-item nav-link active" data-toggle="tab" href="#start">Start</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#form">Form</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#status">Status</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#reports">Reports</a>
      </ul>
    </div>

    <div class="tab-content">
      <div class="tab-pane active" id="start">1</div>
      <div class="tab-pane" id="form">2</div>
      <div class="tab-pane" id="status">3</div>
      <div class="tab-pane" id="reports">4</div>
    </div>

    <!-- Including jQuery and Bootstrap's JavaScript-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
  </body>
</html>

Answer №2

After some troubleshooting, I realized that I didn't need to create a separate div inside the list. I just needed to place those dropdowns inside another li element. The issue was resolved by replacing the following code:

        <div id="h_my" class="collapse">
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_run"> Runs</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_data">Data Update</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_rules">Rules Mapping</a>
        </div>

with this:

        <li id="items" class="collapse" aria-labelledby="c_sicr_wrapper">
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_run"> Runs</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_data">Data Update</a>
            <a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_rules">Rules Mapping</a>
        </li>

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

Is there a method to change the name of a file and have it automatically updated in all other locations where it is referenced?

I need to change the name of an HTML file within Visual Studio Code, but this file is referenced in multiple other files. Is there a quick way to do this? Are there any shortcuts that will let me rename the file and automatically update all references in ...

htmlcssvisual-studiokeyboard-shortcutsshortcut

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...

jquerycssjquery-animateheight

What can I do to eliminate the excess white space within my div element?

I've built this app using the create-react-app CLI, but I'm struggling to remove the extra white spaces surrounding my main container. Check out the screenshot below for reference. Currently, the only div in my app has the following CSS: .main ...

htmlcssreactjs

MySQL unable to access information entered into form

After creating a new log in / register template using CSS3 and HTML, I now have a more visually appealing form compared to the basic one I had before. To achieve this look, I referenced the following tutorial: http://www.script-tutorials.com/css 3-modal-po ...

phpmysqlcssxhtml

Experience the advanced NgPrime p-dropdown template with templating, filtering, and a clear icon that collapses when wrapped within a form element

Check out this link for a demo Whenever I enclose the code below in a </form> element, the drop-down menu collapses. <h5>Advanced with Templating, Filtering and Clear Icon</h5> <p-dropdown [options]="countries" [(ngModel)]=& ...

javascripthtmlangularprimeng-dropdowns

Updating View in Angular 2 ngClass Issue

I'm encountering some challenges with updating my view using ngClass despite the back end updating correctly. Below is my controller: @Component({ selector: 'show-hide-table', template: ' <table> <thead> ...

javascriptcssangularangular2-template

Individual ".htaccess" and ".htpasswd" files are created for every webpage

I have a main page with links to 3 other pages (all within the same folder) named: content1.html, content2.html, and content3.html. <html> <body> <ul> <li><a href="content1.htm">content1</a></li> <li> ...

html.htaccess

Modifying SVG outline colors using CSS

Why is the CSS color: #ffffff not applying to my SVG? This is how it currently looks: https://i.sstatic.net/qh7ng.png This is how I want it to look: https://i.sstatic.net/6tLo5.png Surprisingly, changing currentColor to #ffffff in the SVG itself works ...

htmlcsssvgsveltebootstrap-5

An illustration of the fundamental concepts of require.js

main.md <markdown> <head> <script data-main="script" src="http://requirejs.org/docs/release/2.1.8/minified/require.js"></script> </head> <body></body> </markdown> script.css defi ...

javascripthtmlrequirejs

The nested CSS grid is failing to show its nested elements on the page

Having trouble with a nested CSS GRID - the child grid items are not appearing correctly despite multiple checks on the markup. The first grid row should span three columns, as it does, and is set to display:grid with 2 child grid items. However, the chil ...

htmlcsscss-grid

Ways to widen the header to fit the entire page?

I'm having trouble stretching my header to fill the entire page. I've tried using margin-left and right, but it's not working as expected. My Header CSS: background: green; height: 70px; width: 100%; display: flex; just ...

javascripthtmlcssreactjsmaterial-ui

Content moves as you scroll, not within a lightbox

I have implemented lightbox style overlays for my 'Read More' content on my website. However, I am facing an issue where the content within the lightbox does not scroll; instead, the background page scrolls. Any assistance with resolving this p ...

javascriptjqueryhtmlcsslightbox

What are the best ways to optimize and capitalize on functionality in Electron.js?

After creating three custom buttons for the close, maximize, and minimize functions in Electron.js, I encountered an issue. While the close button is functioning properly, I am struggling with implementing the maximize and minimize buttons. In fact, I have ...

javascripthtmlcsselectron

Transparent background with opaque text

I noticed that my div has a gray background with some opacity. <div className="absolute w-full h-full top-0 left-0 right-0 bottom-0 bg-slate-500 opacity-50 z-10"> <p className="relative top-1/2 px-8 text-center hea ...

javascripthtmlcsstailwind-css

A full-width div containing a child span is unable to be aligned to the right

After reviewing this fiddle, I'm struggling to get my menu aligned correctly at the right edge of the overall "card". Despite trying various methods like margins, right: 0, and float, nothing seems to work as expected. In some cases, I even end up los ...

htmlcssalignment

Facing issues with converting SVG to PDF in Rails 5.0

Below you will find two images: the first one is displayed in a browser view, while the second one shows a PDF view. The issue lies with the SVG to PDF conversion. I have dynamically set the stroke-dashoffset value, which works correctly in the browser bu ...

jquerycssruby-on-railspdfsvg

The header that sticks on scroll is annoyingly blocking the content

I managed to create a sticky on-scroll header/navigation bar successfully. Here is how it looks now However, I encountered an issue. When it reaches the top, it automatically 'covers' the top part of my content, which has text on it, and I don& ...

javascripthtmljquerycssheader

Events related to SVG elements

I have a unique situation where a div containing multiple SVG elements that act as buttons is added to the page after the user interacts with it. I am trying to add events to these SVG elements using event delegation, where I inspect the target of the even ...

javascripthtmlsvg

Issue with Translate3d functionality in fullpage.js not functioning as expected

Currently, I am in the process of constructing a website using fullpage.js with WordPress. Everything is functioning well except for one issue - when attempting to disable the plugin by using destroy() or changing setAutoScrolling to false, the translate3d ...

javascriptjqueryhtmlwordpressfullpage.js

What is preventing the success message sent from the controller from being displayed in the view?

I am puzzled as to why the success message from Bootstrap that is being generated in the controller (PostsController.php) is not showing up in the view (messages.blade.php). I can see the green success banner, but not the actual message. What could be caus ...

phplaraveldebuggingbootstrap-4