We Keep Coding

how can we show and hide tab using checkbox

what i am trying to do that when i click on checkbox 1 and checkbox 2 then show and hide its work fine
i want when i click on both checkbox 1 and 2 then colour toggle tab red green and blue its show in up front on the add new button and when click uncheck box2 then its hide colour toggle
how can we that in below code functionality works fine but
i want to achieve colour toggle tab bar is shown in upfront of the add new button .
any help in this its very thankful .
example image link https://kapwi.ng/w/DQu7aukF what i trying to achieve in my below code https://kapwi.ng/w/DQu7aukF any one help me this
for reference image link what type i try to achieve image link example- https://ibb.co/6BWKS5c
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
.container-2{
display:flex}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>
<div class="container-2">
<div class="row mr-2 ml-0" style="display:none;" id="lundi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="homemade" class="container tab-pane active"><br>
<button type="button" class="btn btn-primary">ADD NEW</button>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mardi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Red</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Red</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Green</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Blue</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">test</div>
<div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
<div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
<div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
<div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

Do NOT wrap the inputs in a div, so you can do with css
#undiCheck:checked ~ #undi {
display: block;
}

First you have replace checkbox to radio button,
i modify your code add some div & change structure of your HTML
add extra some css
i hope this can solve your probleam
.menu {
max-width: 400px;
margin: 0 auto;
padding: 0;
}
.menu a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
line-height: 1;
}
label {
display: block;
margin: 0 0 2px 0;
padding :12px;
line-height: 1;
color :#fff;
background :#007bbb;
cursor :pointer;
}
input {
display: none;
}
.menu .row {
max-height: 0;
overflow-y: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.accordion:checked ~ #lundi2,
.accordion:checked ~ #mardi2,
.accordion:checked ~ #jeudi2,
.accordion:checked ~ #mercredi2 {
max-height: unset;
opacity: 1;
max-width: 100%;
}
.wrapper {
display: inline-block;
}
.menu .row {
position: absolute;
background-color: #9e9e9e;
width: 100%;
left: 0;
}
.menu {
position: relative;
}
<div class="menu">
<div class="wrapper">
<label for="lundi">01</label>
<input type="radio" name="radio" id="lundi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="lundi2">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="homemade" class="container tab-pane active"><br>
<button type="button" class="btn btn-primary">ADD NEW</button>
</div>
</div>
</div>
</div>
<div class="wrapper">
<label for="mardi" >2</label>
<input type="radio" name="radio" id="mardi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="mardi2">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Red</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Red</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Green</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Blue</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<label for="mercredi">3</label>
<input type="radio" name="radio" id="mercredi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="mercredi2">test</div>
</div>
<div class="wrapper">
<label for="jeudi">4</label>
<input type="radio" name="radio" id="jeudi" class="accordion" />
<div class="row mr-2 ml-0" style="" id="jeudi2">Some content4</div>
</div>
</div>

How can I make a bootstrap media list with a scroll bar?

Here is my code:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body class="p-1">
<div class="p-0 container-fluid">
<div class="p-0 row h-25 no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn btn-sm btn-lg btn-success">
TV:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-success">
Light:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-danger">
Air Cond:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
</label>
</div>
<div class="btn-group-toggle p-1">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active"
id="pills-info-tab" data-toggle="pill"
href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
i
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-member-tab" data-toggle="pill"
href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
f
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-message-tab" data-toggle="pill"
href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
c
</a>
</li>
</ul>
<div class="tab-content border border-success position-relative" id="pills-tabContent">
<div class="tab-pane fade p-0 show active " id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
<ul class="list-unstyled overflow-auto h-100">
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
</ul>
</div>
<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">
2
</div>
<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can I make the bootstrap media list(i.e line 81) with a scroll bar?
I have using a "position-relative" and "position-absolute" class to make the browser show a scroll bar.
Unfortunately, it does not work.
It is because when I browse the web page with a mobile phone the media list is too long.

Use CSS, place this into the empty <style></style> tag, and remove the overflow-auto h-100 classes from the ul.
#pills-info {
height: calc(100vh - 100px);
overflow-y: scroll
}

The scrollbar can be added by using a CSS class with these 2 attributes:
overflow-y: scroll
max-height: height;
An example CSS class for scroll bar:
.scroll-bar {
overflow-x: scroll;
overflow-y: scroll;
max-height: 100px;
}
Here is the working example with CSS class added to the list:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
.scroll-bar {
overflow-x: scroll;
overflow-y: scroll;
max-height: 100px;
}
</style>
</head>
<body class="p-1">
<div class="p-0 container-fluid">
<div class="p-0 row h-25 no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn btn-sm btn-lg btn-success">
TV:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-success">
Light:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-danger">
Air Cond:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
</label>
</div>
<div class="btn-group-toggle p-1">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active"
id="pills-info-tab" data-toggle="pill"
href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
i
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-member-tab" data-toggle="pill"
href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
f
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-message-tab" data-toggle="pill"
href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
c
</a>
</li>
</ul>
<div class="tab-content border border-success position-relative" id="pills-tabContent">
<div class="tab-pane fade p-0 show active" id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
<ul class="list-unstyled overflow-auto h-100 scroll-bar">
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
</ul>
</div>
<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">
2
</div>
<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:

How to get on click button to load the nav tab page at the top rather than in the middle?

I have a click event that goes to a Bootstrap Nav Tab. When I click the button it goes to the tab page but is halfway down. I'm trying to have it when a user clicks on the button they start at the top of the page rather than halfway through it. I have tried a couple things but I can't seem to get it to work. Any help would be appreciated!
$('#gotonew').click(function(){
$('a[href="#whatsNew"]').click();
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
});
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body id="learn">
<!-- Nav Bar -->
<nav class="navbar navbar-nav fixed-top fixed-top-1 navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse1 navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
<!-- container -->
</nav>
<!--First set of Nav Tabs-->
<nav class="navbar navbar-expand bg-inverse navbar-inverse fixed-top fixed-top-2">
<div class="container-fluid">
<div class="navbar-collapse collapse justify-content-left" id="navbar2">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active2" href="#overview" role="tab" data-toggle="tab">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gettingStarted" role="tab" data-toggle="tab">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#whatsNew" role="tab" data-toggle="tab">What's New</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Tab panes -->
<section id="subNavPanes">
<div class="tab-content">
<div role="tabpanel" class="tab-pane show fade active" id="overview">
<header>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<!---Button I want to Link to What's New Tab-->
<p class="text-center"><button id="gotonew" class="btn btn-primary">See all the new features</button></p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>footer</p>
</footer>
<!--The Nav Tab Page I'm trying to link to from the Overview Tab-->
<div role="tabpanel" class="tab-pane fade in" id="whatsNew">
<header>
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<section id="section6" class="d-none d-md-block">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center bhoechie-tab-container">
<div class="row">
<div class="col-md-3 bhoechie-tab-menu">
<div class="list-group .d-sm-block">
<a href="#stepOne" class="list-group-item active text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepTwo" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepThree" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFour" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFive" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepSix" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
</div>
</div>
<div class="col-md-9 bhoechie-tab text-center">
<!-- flight section -->
<div id="stepOne" class="bhoechie-tab-content active">
<img class="img-fluid " src="" alt="picture">
<div class="tab-text">
<h3>...</h3>
<p>...</p>
</div>
</div>
<!-- train section -->
<div id="stepTwo" class="bhoechie-tab-content">
<img class="img-fluid" src="" alt="figure10">
<div class="tab-text">
<h3>...</h3>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<p>footer...</p>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
</body>
</html>

I figured out a solution.
`$('#gotonew').click(function(){
$('a[href="#whatsNew"]').click();
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
});`

Bootstrap 4 Tabs with Content not correctly working with Dashboard

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!

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();
}
});

Your scrips are not included in proper order as per Boostrap Docs. http://getbootstrap.com/docs/4.0/getting-started/download/#bootstrap-cdn
Codepen:
https://codepen.io/hunzaboy/pen/zEBPEw
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
padding-top: 3.5rem;
}
/*
* Typography
*/
h1 {
margin-bottom: 20px;
padding-bottom: 9px;
border-bottom: 1px solid #eee;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
}
/* Sidebar navigation */
.sidebar {
padding-left: 0;
padding-right: 0;
}
.sidebar .nav {
margin-bottom: 20px;
}
.sidebar .nav-item {
width: 100%;
}
.sidebar .nav-item+.nav-item {
margin-left: 0;
}
.sidebar .nav-link {
border-radius: 0;
}
/*
* Dashboard
*/
/* Placeholders */
.placeholders {
padding-bottom: 3rem;
}
.placeholder img {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<!-- First jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Then Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Then Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar -->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav mr-auto">
<li role="presentation" class="active nav-item">
<a class="nav-link" data-toggle="tab" aria-controls="tab-overview" href="#tab-overview">Übersicht</a>
</li>
<li role="presentation" class="nav-item">
<a class="nav-link" data-toggle="tab" aria-controls="tab-overview" href="#tab-settings">Einstellungen</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane active" id="tab-overview">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Data 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Data 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Data 3</a>
</li>
</ul>
</nav>
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<h1>Dashboard</h1>
<section class="row text-center placeholders">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<div class="text-muted">Something else</div>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</section>
</main>
</div>
</div>
<div class="tab-pane" id="tab-settings">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Settings 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings 3</a>
</li>
</ul>
</nav>
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<h1>Einstellungen</h1>
<section class="row text-center placeholders">
<div class="col-12 col-sm-12 placeholder">
<h4>Label</h4>
<div class="text-muted">Something else</div>
</div>
</section>
</main>
</div>
</div>
</div>
</div>

Why is the whole site jumping when using affix?

I am using a navbar and a subnav under a Carousel. And my subnav should be fixed after getting there. It is fixed but content is jumping.
if i only would use a container above i would already have found a solution but it don't work for me, so its still jumping..
I already saw some solutions but don't get it..
so what am i doing false?
https://jsfiddle.net/sdkpj9f3/
.navbar {
margin-bottom: 0;
}
#myCarousel {
padding: 0px;
}
.subnav {
margin: 0px;
top: 0px;
background: rgba(85, 93, 106, 0.7);
border-style: none;
}
.subnav.affix {
position: fixed;
top: 0;
width: 100%;
}
.subNav-item:hover {
font-size: 20px;
background: rgba(111, 131, 158, 0.2);
}
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navtop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navtop">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--LOGO-->
<a href="index.html" class="">
<img src="images/logos/RULogo.png" style="height: 50px; width: 50px;">
</a>
</div>
<!--NAV START-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="">Gallery
</li>
<li class="">Shop
</li>
<li class="">Blog
</li>
<li class="">About & Contact
</li>
</ul>
</div>
<!--NAV END-->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/picture3.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Welcome</h1>
<h2>kjlkjkl</h2>
</div>
</div>
<div class="item">
<a href="contact.html" class="no-link">
<img src="images/picture1.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Who?</h1>
</a>
<h2>Developers</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--SlideShow END-->
<!--SubNav-->
<nav class="navbar subnav" role="navigation">
<div class="collapse navbar-collapse collapse-buttons">
<ul class="nav navbar-nav navbar-right">
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
</ul>
</div>
</nav>
<!--END SUbnav-->
<div id="Code" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
<div class="col-sm-4">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center">
<h2>Portfolio</h2>
<br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture1.jpg" alt="Paris" width="400" height="300">
<p><strong>bla blaa</strong>
</p>
<p>blablablabll lbalabl lab lab</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture2.jpg" alt="New York" width="400" height="300">
<p><strong>blablabla</strong>
</p>
<p>blablabalbalbala</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture3.jpg" alt="San Francisco" width="400" height="300">
<p><strong>blablabalbal</strong>
</p>
<p>bla, blabla bla ba</p>
</div>
</div>
</div>
<br>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var h = $('.navtop').height();
var h2 = $('#myCarousel').height();
var h3 = h + h2;
$('.subnav').affix({
offset: {
top: 1200
}
});
</script>
<body>
</html>

Usually when the site jumps from affix, it's because the header becomes position fixed and leaves the layout and is position on top of the content itself. The rest of the site "jumps" up the height of the header.
One thing you can do is wrap your navbar in a wrapper and give the navbar wrapper the height of the nav.
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top navtop">
<!-- the rest of your nav code is here -->
</nav>
</div>
and in css
.navbar-wrapper { height:60px; } /* or whatever the height of the nav is */
You can find the height of your nav by using the browser inspector or by guessing until the jump disappears.
Here is your Jsfiddle, cleaned up a bit so it works.