how can we show and hide tab using checkbox - javascript

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>

Related

how to display multiple nav bar tab horizontal on click checkbox

how to display multiple nav bar tab horizontal on click checkbox
what i am trying to do that when i click on checkbox then show navbar and when i click on uncheck box then its hide.
in here below my code what I m try to create functionality its work fine. but its show and hide nav bar in vertically but i want to achieve in one line (horizontal)
but i am not able to achieve i m stuck on that when i click on checkbox1 and checkbox2 its show in one line in horizontal. But its not happen in my code.
My goal when i click on checkbox1 and checkbox2 both then navbar tab display in one line .but in my code when i click both checkbox 1 and 2 then its show vertically.
my expectation result look like this something https://ibb.co/D16nBNH
anybody body help me this issue.
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
<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">
<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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</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">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</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>
its not happen in my code how can we do that
any help its vey thankful

You can change from .container to .container-2 class and a display:flex to it to get all the nav-tabs in horizontal line.
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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</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">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</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>

dropdown menu always active when not selected

This my html file. I dont know why in the menu dropdown-menu is always active even when not selected!
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/theme/css/style.css">
<link rel="preload" as="style" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css" type="text/css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/print.css">
<style>
.home {
padding: 5rem 0 10rem 0;
background: url('http://arisk-icelab.polito.it/engine/static/assets/images/Slide_ARISK.JPG') no-repeat;
background-size: 100% 100%;
margin-top: 3rem;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a:after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
<div id="home">
<!--- Navigation --->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="menu" aria-haspopup="true" aria-expanded="false">Business Continuity<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Mappatura del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#rischio-soci">Rischio Soci</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Trattamento del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-ambiente">Trattamento Ambiente e Sociale</a>
</li>
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-compliance">Trattamento Compliance</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="nav-item">
<a class="dropdown-item" href="#survey-risk">Risk Top 10</a>
</li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--- End Navigation --->
<!--- Start Landing Page Section --->
<div class="landing">
<div class="row">
</div>
</div>
<!--- End Landing Page Section--->
</div>
<div id="rischio-soci" class="offset">
<div class="home">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<div style="height: 600px" id="drawRischioSoci"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
<div class="row text-md-center text-center text-sm-center" style="padding-left: 1rem">
<div class="col-md-8">
</div>
</div>
</div>
</div>
<!-- Start Trattamento Section-->
<div id="trattamento-ambiente" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Ambiente</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoAmbiente"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<!-- Start Trattamento Section-->
<div id="trattamento-compliance" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Compliance</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoCompliance"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<script src="http://arisk-icelab.polito.it/engine/static/assets/web/assets/jquery/jquery.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/popper/popper.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/smoothscroll/smooth-scroll.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/viewportchecker/jquery.viewportchecker.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/theme/js/script.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/print.css"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
</script>
</body>
</html>
My question is how to resolve this problem that you can see in the menu. You can replicate this page by copy paste of the code.
I posted this question 3 days ago but no answer! yet. the javascript code is from another SO answer. link
Here is the image of problem as well.
As you can see "trattamento del riscio" is active (blue) while only mapatura del rischio should be since it's submenu is open!

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:

Preventing a slidedown event when mouse move back to handler element

I want to prevent/stop slidedown function when user move back the cursor to the handler element.
For example if you mouse over Home the .tab-pane will slide down and if you move mouse from the .tab-pane to Home tab it will re slide down the content. What I need to detect if mouse is coming from associated .tab-pane do nothing.
$('a[data-toggle="tab"]').hover(
function(e) {
$(this).parent().addClass('active');
var target = $(this).data("target");
$($(e.target).attr('href')).slideDown('slow');
},
function(e) {
$(this).parent().removeClass('active');
var target = $(this).data("target");
var targetId = target.replace('#', '');
var relatedTarget = $(e.relatedTarget);
if (relatedTarget.attr('id') === targetId) {
return;
}
$($(e.target).attr('href')).hide();
}
);
$('.tab-pane').hover(function(e) {}, function() {
$(this).slideUp('slow');
$('.nav-tabs li').removeClass('active');
});
.tab-pane {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px;
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a data-target="home" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a data-target="profile" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a data-target="messages" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a data-target="settings" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">Home
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe to newsletter?</label>
<hr />
<form method="post">
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="animal" value="Cat" />Cats <br />
<input type="checkbox" name="animal" value="Dog" />Dogs<br />
<input type="checkbox" name="animal" value="Bird" />Birds<br />
<input type="submit" value="Submit now" />
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Message</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting</div>
</div>
</div>
</div>

I have adjusted the script only, please try this:
$('a[data-toggle="tab"]').hover(
function(e) {
$(this).parent().addClass('active');
var target = $(this).data("target");
$('.tab-pane.active:not(#'+target+')').hide(); // Hide the tab panel except the current target
$($(e.target).attr('href')).slideDown('slow').addClass('active'); // Add the class 'active' to the tab panel
},
function(e) {
$(this).parent().removeClass('active');
var target = $(this).data("target");
var targetId = target.replace('#', '');
var relatedTarget = $(e.relatedTarget);
if (relatedTarget.attr('id') === targetId) {
return;
}
$($(e.target).attr('href')).hide();
}
);
$('.container').hover(
function(e) {},
function(e) {
$('.tab-pane.active').slideUp('slow');
$('.nav-tabs li').removeClass('active');
});
.tab-pane {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px;
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a data-target="home" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a data-target="profile" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a data-target="messages" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a data-target="settings" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="home">Home
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe to newsletter?</label>
<hr />
<form method="post">
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input type="checkbox" name="animal" value="Cat" />Cats <br />
<input type="checkbox" name="animal" value="Dog" />Dogs<br />
<input type="checkbox" name="animal" value="Bird" />Birds<br />
<input type="submit" value="Submit now" />
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Message</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting</div>
</div>
</div>
</div>
</div>

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>

Categories