Stop closing tab item on second click
I have a piece of code that opens tabs, however I would like to keep 1 tab always open.
How to disable the second click on an already opened button by closing the tab?
So, referring to the fiddle, if you click Button 1 once, it will display the corresponding tab, but if you click Button 1 again, it should not close the corresponding tab. Just pressing button "2" will close it, also opening its own tab.
Js
$(document).ready(function() {
$(".tone").click(function(e) {
e.preventDefault();
var tab = $(this).attr("id");
$(".tone__pack").not(tab).css("display", "none");
$(tab).toggle();
});
});
Html
<div class="tone" id="#tone1">
Button 1
</div>
<div class="tone__pack" id="tone1">
</div>
<div class="tone" id="#tone2">
Button 2
</div>
<div class="tone__pack" id="tone2">
</div>
CSS
.tone {
display: block;
background: blue;
width: 100px;
text-align: center;
color: #fff;
}
.tone__pack {
display: none;
width: 100px;
height: 100px;
background: red;
}
source to share
You can use . show () instead of switching.
$(document).ready(function() {
$(".tone").click(function(e) {
e.preventDefault();
var tab = $(this).attr("id");
$(".tone__pack").not(tab).css("display", "none");
$(tab).show();
});
});
.tone {
display: block;
background: blue;
width: 100px;
text-align: center;
color: #fff;
}
.tone__pack {
display: none;
width: 100px;
height: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tone" id="#tone1">
Button 1
</div>
<div class="tone__pack" id="tone1">
</div>
<div class="tone" id="#tone2">
Button 2
</div>
<div class="tone__pack" id="tone2">
</div>
source to share
Switch it only when its package is hidden, for example:
$(document).ready(function() {
$(".tone").click(function(e) {
e.preventDefault();
var tab = $(this).attr("id");
if($(".tone__pack"+tab).is(":hidden")) {
$(".tone__pack").not(tab).css("display", "none");
$(tab).toggle();
}
});
});
.tone {
display: block;
background: blue;
width: 100px;
text-align: center;
color: #fff;
}
.tone__pack {
display: none;
width: 100px;
height: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tone" id="#tone1">
Button 1
</div>
<div class="tone__pack" id="tone1">
</div>
<div class="tone" id="#tone2">
Button 2
</div>
<div class="tone__pack" id="tone2">
</div>
source to share
I changed your code as follows:
When the tab is open, I will add one class to determine that it is already open.
when the click event is detected again if it already contains the class then it will do nothing, otherwise I will do it as needed.
$(document).ready(function() {
$(".tone").click(function(e) {
e.preventDefault();
var tab = $(this).attr("id");
$(".tone__pack").not(tab).css("display", "none");
// removing class, if it is present in any other tab
$(".tone__pack").not(tab).removeClass("active");
//if it is already opened, then return
if($(tab).hasClass("active")){
return;
}
//add identifier for next iterations
$(tab).addClass("active");
$(tab).toggle();
});
});
source to share