jQuery: Hide/Display tabs (and its corresponding content) with check boxes
- by Ricardo
Hello,
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 type="checkbox" name="a" id="a">
Products & Services <span>(16)</span></label>
</li>
<li>
<label>
<input type="checkbox" name="b" id="b">
Publications <span>(9)</span></label>
</li>
<li>
<label>
<input type="checkbox" name="c" id="c">
Other <span>(150)</span></label>
</li>
</ul>
</div>
<ul class="tabs">
<li><span rel="tabs1" class="defaulttab">Products & 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.
