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>
Related
I have two tabs, Google and Yahoo!. The goal is that if the 'Google' tab is active, then the plus sign icon (on the right) will contain the URL based on the conditional.
Example: If 'Google' tab is active, then clicking on the plus sign should open a google.com page.
I'm not sure what I'm doing wrong:
let activeTab = document.querySelector(".nav-tabs li.active");
let selectedForm = document.querySelector("#formSelector");
if (activeTab.textContent == "Google") {
selectedForm.setAttribute("onclick", "location.href='https://www.google.com'");
} else if (activeTab.textContent == "Yahoo!") {
selectedForm.setAttribute("onclick", "location.href='https://www.yahoo.com'");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
I would recommend adding a click event listener on the button that checks the active tab and redirects accordingly:
let selectedForm = document.querySelector("#formSelector");
selectedForm.addEventListener('click', function() {
let activeTab = document.querySelector(".nav-tabs li.active");
if (activeTab.textContent.trim() == "Google") {
location.href = 'https://google.com'
} else {
location.href = 'https://yahoo.com'
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
As Spectric said, moving the check to be based on click of a tab would be ideal.
Here's an alternative implementation (requires HTML & JS changes).
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google" related-url="https://google.com">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo" related-url="https://yahoo.com">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
Javascript
<script>
const tabClick = document.querySelectorAll(".nav-tabs");
const selectedForm = document.querySelector("#formSelector");
tabClick.forEach((tabEl) => {
tabEl.addEventListener('click', (e) => {
console.log(tabEl);
console.log(e);
selectedForm.setAttribute('href', e.target.getAttribute('related-url'));
});
})
</script>
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>
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'm trying to use bootstrap's card/tab feature to create a tabulated card that has 3 tabs, each corresponding to it's own active 'card body'
My current code:
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body">
<div id="insta">Instagram</div>
<div id="face">Facebook</div>
<div id="twit">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
Creates the card correctly, and it indeed shows the appropriate tab headers with their respective links.
What I'm trying to do is make it so that if the Instagram tab is active, it shows the text 'Instagram'. Same for the other 2. Currently they are just inactive tabs and the main tab's body shows all three lines of text.
The javascript looks right but it's just not tabulating properly
Here's the codepen:
https://codepen.io/anon/pen/gKLJrm
You need to the use the appropriate markup for tabs with tab-content and tab-pane to make the tabs work: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
(no jquery is needed)
https://www.codeply.com/go/p5Zm4JA5jb
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
Notice both the nav-link and tab-pane have the active item set.
I hope this solves your problem
$(document).ready(function() {
$('.nav-item a').on('click', function(e){
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tab-content ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
li.nav-item.active a {
background: #fff;
border: 1px solid #eee;
border-bottom: none
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTabs">
<li class="nav-item active">
<a class="nav-link" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</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="" />