what i am trying to do is in my below code when i click on checkbox2 then tab panes red green and blue is show in right side above the add new button and when i unclick then add new button is coming in original position.
i try to make this type functionality https://kapwi.ng/w/3zPHfzol any help in this
in below my code i tried using if else condition but its not work
can anyone help me out this functionality.
i try to make when i click on first checkbox1 then variant and add new tab is show and when i lick on check box 2 then red green blue tab pan is show in above the add new tab and when i uncheck the checkbox2 then add new tab is coming ur own position. this type functionality i want to create.
my expected functionality look like this https://kapwi.ng/w/3zPHfzol
its vey thankful
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("mardi");
if (checkBox.checked == true){
mardi.style.display = "block";
xyz.style.display = "block";
} else {
mardi.style.display = "none";
xyz.style.display = "none";
}
}
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 class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input class="mr-1" type="checkbox" value="mardi" id="myCheck" onclick="myFunction()" />2
<input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input class="mr-1" 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>
</div>
<!-- Tab panes -->
<div class="tab-content" id="xyz" style="display:none;">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="abc">
<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>
</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>
why can't u add a add new button tab div to variant button list(make another li tag in same ul variant button tag) hope this helps u!
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("mardi");
if (checkBox.checked == true){
mardi.style.display = "block";
xyz.style.display = "block";
document.getElementById("xyz").style.left = "200px";
} else {
mardi.style.display = "none";
xyz.style.display = "none";
}
}
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 class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input class="mr-1" type="checkbox" value="mardi" id="myCheck" onclick="myFunction()" />2
<input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input class="mr-1" 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>
</div>
<!-- Tab panes -->
<div class="tab-content" id="xyz" style="display:none;">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="abc">
<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>
</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>
Related
I'm trying to click on a button tab and allow it to open up my content but it will not work. I seem to have the right code but it's still not working. I want it to be able to open my content once I click the button tab. This is really confusing I think I have tried everything
<%per_sel = "false"
job_sel = "false"
per_link = "nav-link"
job_link = "nav-link"
per_class = "tab-pane fade"
job_class = "tab-pane fade"
per_dis = " disabled"
job_dis = " disabled"
if app_pg >=5 then
per_sel = "true"
per_dis = ""
end if
if app_pg = 5 then
per_class = "tab-pane fade show active"
per_link = "nav-link active"
end if
if app_pg >=6 then
job_sel = "true"
job_dis = ""
end if
if app_pg = 6 then
job_class = "tab-pane fade show active"
job_link = "nav-link active"
end if%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demographics</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/theme.css">
<script src="assets/js/bootstrap.bundle.min.js" defer></script>
</head>
<body class="d-flex flex-column vh-100">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="<%=per_link%>" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="<%=per_sel%>" <%=per_dis%>>Personal</button>
</li>
<li class="nav-item">
<button class="<%=job_link%>" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="<%=job_sel%>" <%=job_dis%>>Job</button>
</li>
</ul>
<div class="tab-content" id="appTabContent">
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</form>
</div>
<div class="<%=job_class%>" id="jobPanel" role="tabpanel" aria-
labelledby="job-tab">Job
</div>
<form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
</form>
</div>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm on the Job screen in the image below and click the personal but it stays on the job screen.
You HTML doesnt respect the correct structure for HTML file as following:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- YOUR CONTENT HERE -->
</body>
</html>
With bootstrap 5, your code seems to work perfectly if you put this
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</div>
into a <body> tag take a look at the correct structure for HTML document here
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<div class="tab-pane fade active show " id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</div>
<div class="tab-pane fade" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
job
</div>
If you want to show specific tab on load, simply add active show classes to a tab-pane fade element.
<div class="tab-pane fade active show" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
And to be perfect you can add active class to nav-link element correponding to your tab-pane
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
EDIT: You must respect the bootstrap structure to get it working
Your .tap-pane MUST be children of .tab-content so you structure MUST look like that:
.tab-content > .tab-pane > form
OR
.tab-content > form.tab-pane
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<!-- tab-content PARENT OF .tab-pane -->
<div class="tab-content">
<!-- tab-pane CHILDREN OF .tab-content -->
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<!-- form CHILDREN of .tab-pane -->
<form>Your form here</form>
</div>
<div class="tab-pane fade active show" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
<h2>Job</h2>
<form>Your form here</form>
</div>
</div>
What I am trying to do is in below code is when I check the checkbox1, variants is shown and on uncheck it hides and when I check checkbox2 it shows the colour tab and toggles red green blue. This functionality work fine for me .
But what I try to achieve is when i click on both check boxes then it shows this
image link here
My expected result
and when I uncheck the checkbox then it shows this
I try to check style if() else() condition but it does not work.
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 class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input class="mr-1" type="checkbox" value="mardi" id="" onclick="addDay(this)" />2
<input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input class="mr-1" 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>
In my code below what i am trying to achieve is when i click on home checkbox then only home tab is open and when i click on menu 1 checkbox then menu 1 tab is show and when i click on menu 2 checkbox then
menu 2 tab is show.
but in my below code when i click on home checkbox then home tab menu 1 tab and menu 2 tab all are show is not work what i am try to achieve
but i want to make according to checkbox tab is open and close
anyone help me in this
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function myFunction1() {
var checkBox = document.getElementById("myCheck1");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "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>
<label for="myCheck">Home:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<label for="myCheck">Menu1:</label>
<input type="checkbox" onclick="myFunction1()">
<label for="myCheck">Menu2:</label>
<input type="checkbox">
<div class="container" id="text" style="display:none">
<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>
I'm not sure if that is what you are asking for...
const text = document.getElementById("text");
const tabs = document.querySelectorAll(".tab");
const checkboxes = document.querySelectorAll('[data-menu]');
function myFunction(event) {
const menu = document.getElementById(event.dataset.menu);
function hideAll(){
tabs.forEach((tab) =>{
tab.style.display = "none";
tab.classList.remove("active");
});
checkboxes.forEach((checkbox)=>{
checkbox.checked = false;
});
event.checked = true;
}
if (event.checked == true){
hideAll();
text.style.display = "block";
menu.style.display = "block";
menu.classList.add("active");
} else {
text.style.display = "none";
hideAll();
}
}
checkboxes.forEach((checkbox)=>{
checkbox.addEventListener('change',()=>{myFunction(checkbox);});
});
<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>
<label for="myCheck">Home:</label>
<input type="checkbox" id="myCheck" data-menu="home" >
<label for="myCheck1">Menu1:</label>
<input id="myCheck1" type="checkbox" data-menu="menu1" >
<label for="myCheck2">Menu2:</label>
<input id="myCheck2" data-menu="menu2" type="checkbox" >
<div class="container" id="text" style="display:none">
<div class="tab-content">
<div id="home" class="container tab-pane active tab"><br/>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane tab"><br/>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane tab"><br/>
<h3>Menu 2</h3>
</div>
</div>
</div>
You also had the same "for" attribute for all labels and that made them trigger the first checkbox. Now using the code above you can add the ID class of the content-tab as data-menu="idOfThatTab".
const checkboxes = document.querySelectorAll('[data-menu]');
function myFunction(event) {
const menuVal = event.dataset.menu;
const menu = document.querySelector(`[data-pill=${menuVal}]`);
if (event.checked == true){
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
checkboxes.forEach((checkbox)=>{
checkbox.addEventListener('change',()=>{myFunction(checkbox);});
});
<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>
<label for="myCheck">Home:</label>
<input type="checkbox" id="myCheck" data-menu="home" >
<label for="myCheck1">Menu1:</label>
<input id="myCheck1" type="checkbox" data-menu="menu1" >
<label for="myCheck2">Menu2:</label>
<input id="myCheck2" data-menu="menu2" type="checkbox" >
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link " style="display:none" data-toggle="pill" data-pill="home" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" style="display:none" data-toggle="pill" data-pill="menu1" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" style="display:none" data-toggle="pill" data-pill="menu2" href="#menu2">Menu 2</a>
</li>
</ul>
<div class="container" id="text" style="display:none">
<div class="tab-content">
<div id="home" class="container tab-pane active tab"><br/>
<h3>HOME1</h3>
<p>test</p>
</div>
<div id="menu1" class="container tab-pane tab"><br/>
<h3>Menu 11</h3>
<p>test</p>
</div>
<div id="menu2" class="container tab-pane tab"><br/>
<h3>Menu 22</h3>
<p>test</p>
</div>
</div>
</div>
After your comments I'm still not sure if that's what you need
const checkboxes = document.querySelectorAll('[data-menu]');
function myFunction(event) {
const menuVal = event.dataset.menu;
const menu = document.querySelector(`[data-pill=${menuVal}]`);
if (event.checked == true){
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
checkboxes.forEach((checkbox)=>{
checkbox.addEventListener('change',()=>{myFunction(checkbox);});
});
<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>
<label for="myCheck">Home:</label>
<input type="checkbox" id="myCheck" data-menu="home" >
<label for="myCheck1">Menu1:</label>
<input id="myCheck1" type="checkbox" data-menu="menu1" >
<label for="myCheck2">Menu2:</label>
<input id="myCheck2" data-menu="menu2" type="checkbox" >
<div class="container" id="text">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link" style="display:none" data-toggle="pill" data-pill="home" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" style="display:none" data-toggle="pill" data-pill="menu1" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" style="display:none" data-toggle="pill" data-pill="menu2" href="#menu2">Menu 2</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="container tab-pane tab"><br/>
<h3>HOME</h3>
</div>
<div id="menu1" class="container tab-pane tab"><br/>
<h3>Menu 1</h3>
</div>
<div id="menu2" class="container tab-pane tab"><br/>
<h3>Menu 2</h3>
</div>
</div>
</div>
i want to try in my below code when i click on checkbox2 then nav tab show above the add new button.
but in my code right now tab is not show above the button when i click the colour checkbox
i try to this when i click on checkbox colour then nav tab is set or show above the add new button
plz check in my below code.
any help in this its very thankful
for refence link snapshots what i try to achieve https://www.kapwing.com/6048ac8969a2fc007f51ab42/studio/editor
i try to achieve when i click on checkbox1 then show add new button and then click checkbox2 its red green blue tab show on the place of of new button and new button is display down after the red green blue toggle
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 class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input class="mr-1" type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input class="mr-1" 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>
I have bootstrap tabs and I wanted to change the form value according to which tabs is active is it possible to do so using jquery here is my javascript
$(document).ready(function() {
$('.tab').click(function() {
var value_ch = $('.tabe-pane.active').attr('id');
$('#valuechange').val(value_ch);
});
});
<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">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id='ma' href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
<li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>
<div class="tab-content">
<div id="ma" class="tab-pane fade in active">
<h3>First Value</h3>
</div>
<div id="otc" class="tab-pane fade">
<h3>Second tab</h3>
</div>
</div>
<input type="text" id="valuechange" value="" />
Can any one help me out as of when i CLICK THE VALUE of the input field is not changing
There is a few things wrong.
You use id="ma" 2 times, I removed from the one from li a
You use $('.tab') but nothing have the class tab
You have $('.tabe-pane.active') but should be $('.tab-pane.active')
$(document).ready(function() {
$('a[data-toggle="tab"]').click(function() {
var value_ch = $($(this).attr("href")).attr("id") // $('.tab-pane.active').attr('id');
$('#valuechange').val(value_ch);
});
});
<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">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
<li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>
<div class="tab-content">
<div id="ma" class="tab-pane fade in active">
<h3>First Value</h3>
</div>
<div id="otc" class="tab-pane fade">
<h3>Second tab</h3>
</div>
</div>
<input type="text" id="valuechange" value="" />
$(document).ready(function() {
$('a[data-toggle="tab"]').click(function() {
var value_ch = $('this').attr('href');
$('#valuechange').val(value_ch);
});
});
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id='ma' href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
<li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>
<div class="tab-content">
<div id="ma" class="tab-pane fade in active">
<h3>First Value</h3>
</div>
<div id="otc" class="tab-pane fade">
<h3>Second tab</h3>
</div>
</div>
<input type="text" id="valuechange" value="" />