Hide/Display tabs (and its corresponding content) with check boxes

Well, this must be very simple to do for most of you, but I have no idea how to accomplish this.开发者_开发技巧

I have a set of tabs and on top of the tabs is a set of checkboxes ; each checkbox 'corresponds' to a tab.

What I need is to be able to activate/deactivate each checkbox and have its corresponding tab (and the tab's content) hide/display.

Here's my HTML:

<div class="show-results-from">
  <ul>
    <li>See results from:</li>
    <li>
      <label>
        <input name="a" type="checkbox" id="a" checked disabled>
        Products &amp; Services <span>(16)</span></label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="b" id="b" checked>
        Publications <span>(9)</span></label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="c" id="c" checked>
        Other <span>(150)</span></label>
    </li>
  </ul>
</div>
<ul class="tabs">
  <li><span rel="tabs1" class="defaulttab">Products &amp; Services</span></li>
  <li><span rel="tabs2">Publications</span></li>
  <li><span rel="tabs3">Other</span></li>
</ul>
<div class="tab-content" id="tabs1">content</div>
<div class="tab-content" id="tabs2">content</div>
<div class="tab-content" id="tabs3">content</div>

Any help with this is greatly appreciated.

EDIT

I apologize, I should've added the script for my tabs, FYI, I'm not using jQuery UI Tabs:

$(function() { 
    $('.tabs span:first-child').click(function(){
        switch_tabs($(this));
        return false;
    }); 
    switch_tabs($('.defaulttab'));
});

function switch_tabs(obj)
{
    $('.tab-content').hide();
    $('.tabs span:first-child').removeClass("selected");
    var id = obj.attr("rel");
    $('#'+id).show();
    obj.addClass("selected");
}

Script taken from this tutorial: http://justfreetemplates.com/blog/2009/08/31/ultra-simple-jquery-tabs.html

More info:

I didn't really think about the user cases/situations, so here are two:

1. I can't have no tabs, I need to have at least one 'default' tab, so for that I added 'disabled' to the first checkbox thus the first tab can not be hidden. This one is solved.

2. What happens is the user hides a tab that's active? Well, my solution, if this happens, would be to make the the default tab, active. Any idea how to 'restore' the class 'selected' to the default tab if a an already selected tab is hidden?

Thanks again.

---

I think JQuery UI Tabs would accomplish what you're trying to do.

http://jqueryui.com/demos/tabs/

---

If you add a value to each checkbox with the id of the tab it should control:

<input type="checkbox" name="a" id="a" value="tabs1" />

...then you can do this:

$(document).ready( function(){
  $('div.show-results-from').find(':checkbox').click( function(){
    if( $('ul.tabs li').find('span.selected[rel='+this.value+']').length
        && !this.checked ){
        // if user unchecking the "selected" li/tab
        switch_tabs($('.defaulttab')); // choose default tab
    }
    $('#'+this.value).toggle( this.checked );
    $('ul.tabs li').has('span[rel='+this.value+']').toggle( this.checked ); 
  });
});

You might also be interested in the jQuery-UI tabs functionality if you don't want to roll your own.

---

Edit: To address @Ricardo's question in the comments below, I added a conditional to switch to the default tab if the user is unchecking the currently selected tab. Untested.

---

$(document).ready(function(){
  $("ul .tabs span").hide();
   $("div .tab-content").hide();
    $("input[type='checkbox']").click(function(){
      switch this.id:
       {
         case "a":
             $("#tab1").toggle();
             $("#tabs1").toggle();
           break;
           //write case b and c
       }
     });});

---

Based on your markup you can do something like this. See the live example (jsfiddle).

$('.show-results-from input:checkbox').each(function(i, el){
    this.index = i;
}).change(function(){
    var $span = $('ul.tabs li').eq(this.index).find('span');
    if(this.checked)
        $('#' + $span.attr('rel')).show('fast');
    else
        $('#' + $span.attr('rel')).hide('fast');
});

---

Assuming you're using jQueryUI tabs (please post a link to how you're creating tabs), you can do something like this:

HTML:

    <li>
        <label>
            <input type="checkbox" name="a" id="a" class="tab-check" value="tabs1" checked='checked'>
            Products &amp; Services <span>(16)</span></label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="b" id="b" class="tab-check" value="tabs2" checked='checked'>
            Publications <span>(9)</span></label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="c" id="c" class="tab-check" value="tabs3" checked='checked'>
            Other <span>(150)</span></label>
    </li>

Note: I've initialized all of your checkboxes to 'checked' and given each checkbox a value corresponding to a tab id. I've also added a class tab-check to each input so I can add an event handler to each checkbox.

Given that HTML, you could write JS like this:

$("input.tab-check").change(function() {
    $("a[href='#" + this.value + "']").parent().toggle();
    $("#" + this.value).toggle();
});

Which hides/shows the tab and content depending on the state of the checkbox.

See a working example here: http://jsfiddle.net/andrewwhitaker/uy7AG/