I have implemented a checkbox with two sets of tabs that are meant to be displayed or hidden based on the checked state of the checkbox.
Currently, the checkbox switches tabs when checked, but does not switch back when unchecked.
What modifications can I make in the code to ensure the checkbox controls the display of tabs?
UPDATED:https://jsfiddle.net/gtcf3y5d/
HTML:
<li role="tab">
<label data-target="#Custom">
<input id="custom-mark" name="intervaltype" type="checkbox" />
Custom
</label>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="Custom">
<h3>Custom...</h3>
</div>
<div role="tabpanel" class="tab-pane active" id="Types">
<h3>Regular</h3>
</div>
</div>
</div>
CSS:
body {
padding: 1em;
}
/* Mimic Bootstrap's .nav-tabs>li(.active)>a
when using radio buttons instead of links in tab headers */
.nav-tabs>li>label
{
display: inline-block;
padding: 1em;
margin: 0;
border: 1px solid transparent;
cursor: pointer;
}
.nav-tabs>li.active>label
{
cursor: default;
border-color: #ddd;
border-bottom-color: white;
}
JS:
$('input[name="intervaltype"]').click(function () {
//jQuery handles UI toggling correctly when we apply "data-target" attributes and call .tab('show')
//on the <li> elements' immediate children, e.g the <label> elements:
$(this).closest('label').tab('show');
});