How can I use a checkbox to switch between tabs when checked or unchecked?

I created a check box with two different sets of tabs that should be displayed or hidden depending on if the checkbox is checked or not.

So far I have a checkbox that switches tabs when checked, but when I uncheck it; it doesn't change back.

What changes can I make to the code to make the checkbox checked on or off switch the tabs? http://ift.tt/2aNf6Gg

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');
});