Bootstrap 4 Tabs with Content not correctly working with Dashboard

Question

I would like to use the dashboard template from bootstrap to build a simple page but currently I'm stuck implementing tabs in the navbar with different content panes in the body.

Overall it's working with two panes but when I switch from the first to the second pane and back to the first one again, I see both tab contents displayed. When I switch again it's working correctly (although a list element inside the first tab isn't set to active anymore).

I've created a not properly working jsfiddle, but hunzaboys codepen is working properly and showing my problem.

Where is my error? Why are both tab contents shown when switching back?

EDIT:

Seems like the problem was having another navbar nested inside a tab contend, especially having two "active" classes inside the tab seems to cause the problems (even if the active element isn't a nav item or something else).

I made a new example: https://codepen.io/anon/pen/KXMoRV

If you switch between the top navbar to "Einstellungen" and back to "Überblick" again you will see both content panes active at the same time.

If you reload the page and remove the "active" class from the button in line 45 this doesn't happen.

                    <button class="btn btn-primary active" type="button">Test</button>

Can anyone help me out?

Thanks in advance for any help!

If you open the console you have some errors related to bootstrap.js and jquery. You need to add jquery before bootstrap. — Aslam
Aaah I can change the order how the resources, thank you. I updated the fiddle (jsfiddle.net/70gx0nfo/4) but it always says that I need popper.js even if it's already included. — Robert
Yes in order to use B4, you need to add popper.js. It's a requirement if you want to use the js files. — Aslam
I corrected the order but it didn't load the popper.js correctly. So I know used the created codepen example from hunzaboy. It shows my problem when switching between the tabs. — Robert

Robert Robert · Accepted Answer · 2017-09-27T05:38:50

Solved this by myself because I haven't found a proper answer or solution anywhere.

Instead of using the nav function from bootstrap in the top nav bar and in each of its content panes, I am only using the bootstrap nav now in the content panes and controlling the top nav bar manually now.

I made a codepen which shows the current state and the expected behaviour:

https://codepen.io/anon/pen/KXWvLV

Here is the code to manually control the divs and simulate the nav behaviour:

$("#link-overview").on("click", function () {
    console.log("[INFO] Showing overview");
    $("#pane-overview").show();
    $("#pane-settings").hide();
    }
});

$("#link-settings").on("click", function () {
    console.log("[INFO] Showing settings");
    $("#pane-settings").show();
    $("#pane-overview").hide();
    }
});

Bootstrap 4 Tabs with Content not correctly working with Dashboard

2 Answers