Menu
I have 4 tabs, each tab contains different data. When I click on the checkbox, the corresponding tab is shown.But when I uncheck, the tab is invisible but the contents are not invisible. How to solve this problem? My page is
<style>
.ui-state-disabled {
display: none;
}
</style>
<script>
$(function() {
$("#tabs").tabs();
$("#tabs").tabs("option", {
"selected": 2,
"disabled": [1,2,3]
});
$( "input[type=checkbox]" ).click(function(){
if ($(this).is(':checked')) {
$('#tabs').tabs("enable", $(this).val());
$('#tabs').tabs("select", $(this).val() );
}
else{
$('#tabs').tabs("disable", $(this).val());
}
});
});
</script>
.
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nithin</a> </li>
<li><a href="#tabs-2">Vipin</a></li>
<li><a href="#tabs-3">Sachin</a></li>
<li><a href="#tabs-4">Ganguly</a></li>
</ul>
<div id="tabs-1">
<p>Nithin</p>
</div>
<div id="tabs-2">
<p>Vipin</p>
</div>
<div id="tabs-3">
<p>Sachin</p>
</div>
<div id="tabs-4">
<p>Ganguly</p>
</div>
</div>
<input type="checkbox" name="tabs-1" value="1">tabs-1
<input type="checkbox" name="tabs-2" value="2">tabs-2
<input type="checkbox" name="tabs-3" value="3">tabs-3
<input type="checkbox" name="tabs-4" value="4">tabs-4
<br>
</body>
</html>
You can see the working code on http://jsfiddle.net/2aQ2g/12/
502
Just check the else portion ... Working Demo
$(function() {
$("#tabs").tabs();
$("#tabs").tabs("option", {
"selected": 2,
"disabled": [1,2,3]
});
$( "input[type=checkbox]" ).click(function(){
if ($(this).is(':checked')) {
$('#tabs').tabs("enable", $(this).val());
$('#tabs').tabs("select", $(this).val() );
}
else{
// $('#tabs').tabs("disable", $(this).val());
$('#tabs').tabs("disable", $(this).val());
$('#tabs').tabs("select", $(this).prev().val());
$('#tabs').tabs("enable", $(this).prev().val());
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
