I have a page that uses JavaScript to show/hide divs when you click on links at the top of the page. Within each of these divs, I have a table that uses jQuery tablesorter.
The zebra widget is working on the table that shows on load, but it does not work on any of the other tables. When I inspect the elements using Chrome, it shows that the first table has the rows classed as odd or even, but the rows in the other tables do not show this classing. I'm not sure why the other tables are losing this.
Here's my code:
JSFiddle: http://jsfiddle.net/wy7Pq/1/
JavaScript:
$(document).ready(function() {
$('#finance_link').click(function() {
$('#rank2_display').hide();
$('#rank3_display').hide();
$('#rank4_display').hide();
$('#rank5_display').hide();
$('#rank1_display').show();
$("#finance_link").parent().addClass("active");
$("#students_link").parent().removeClass("active");
$("#other_link").parent().removeClass("active");
$("#planning_link").parent().removeClass("active");
$("#children_link").parent().removeClass("active");
return false;
}); // end click function
$('#students_link').click(function() {
$('#rank1_display').hide();
$('#rank3_display').hide();
$('#rank4_display').hide();
$('#rank5_display').hide();
$('#rank2_display').show();
$("#finance_link").parent().removeClass("active");
$("#students_link").parent().addClass("active");
$("#other_link").parent().removeClass("active");
$("#planning_link").parent().removeClass("active");
$("#children_link").parent().removeClass("active");
return false;
}); // end click function
$('#other_link').click(function() {
$('#rank1_display').hide();
$('#rank2_display').hide();
$('#rank3_display').show();
$('#rank4_display').hide();
$('#rank5_display').hide();
$("#finance_link").parent().removeClass("active");
$("#students_link").parent().removeClass("active");
$("#other_link").parent().addClass("active");
$("#planning_link").parent().removeClass("active");
$("#children_link").parent().removeClass("active");
return false;
}); // end click function
$('#planning_link').click(function() {
$('#rank1_display').hide();
$('#rank2_display').hide();
$('#rank3_display').hide();
$('#rank4_display').show();
$('#rank5_display').hide();
$("#finance_link").parent().removeClass("active");
$("#students_link").parent().removeClass("active");
$("#other_link").parent().removeClass("active");
$("#planning_link").parent().addClass("active");
$("#children_link").parent().removeClass("active");
return false;
}); // end click function
$('#children_link').click(function() {
$('#rank1_display').hide();
$('#rank2_display').hide();
$('#rank3_display').hide();
$('#rank4_display').hide();
$('#rank5_display').show();
$("#finance_link").parent().removeClass("active");
$("#students_link").parent().removeClass("active");
$("#other_link").parent().removeClass("active");
$("#planning_link").parent().removeClass("active");
$("#children_link").parent().addClass("active");
return false;
}); // end click function
});;
$(function() {
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra'],
sortList: [[0, 0]],
headers: {
0: {
sorter: 'ignoreArticles',
ignoreArticles : 'en'
}
}
});
});
HTML:
<div id="eresources_block">
<h3>Choose a Category to Browse Books by Topic</h3>
<ul id="rank_menu">
<li class="active"><a id="finance_link" href="rank=1">Personal Finance</a></li>
<li><a id="students_link" href="rank=2">College Students/Graduates</a></li>
<li><a id="planning_link" href="rank=4">College Planning/Financial Aid</a><br>
<br></li>
<li><a id="other_link" href="rank=3">Other Groups</a></li>
<li><a id="children_link" href="rank=5">For Children & Teenagers</a></li>
</ul>
<div id="rank1_display" class="show_rank">
<h4>Basic Personal Finance</h4>
<table id="basic" class="tablesorter">
<thead>
<tr>
<th scope="col"><strong>Title</strong></th>
<th scope="col"><strong>Call Number</strong></th>
<th scope="col"><strong>Audience</strong></th>
<th scope="col"><strong>Topics</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><em><strong>Basic Budgeting: The Simple Way for Anyone and Everyone to Be in Control of Their Finances</strong></em></td>
<td> <a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002331959" target="_blank">HG179 .M5 2010</a></td>
<td>Everyone</td>
<td>Budgeting</td>
</tr>
<tr>
<td><em><strong>The Only Budgeting Book You'll Ever Need</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002209478" target="_blank">HG179 .D7433 2012</a></td>
<td>Everyone</td>
<td>Budgeting</td>
</tr>
<tr>
<td><em><strong>The Skinny on Credit Cards: How to Master the Credit Card Game</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001725956" target="_blank">HG3755.8.U6 R36 2009</a></td>
<td>Everyone</td>
<td>Credit cards</td>
</tr>
<tr>
<td><em><strong>Your Credit Score: How to Improve the 3-Digit Number That Shapes Your Financial Future</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001929742" target="_blank">HG3751.7 .W47 2012</a></td>
<td>Everyone</td>
<td>Credit score</td>
</tr>
<tr>
<td><em><strong>Deal with Your Debt: Free Yourself From What You Owe</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002333124" target="_blank">HG3755 .W44 2013</a></td>
<td>Everyone</td>
<td>Debt management</td>
</tr>
</tbody>
</table>
</div>
<div id="rank2_display" class="hide_rank">
<h4>College Students and Graduates</h4>
<table id="college" class="tablesorter">
<thead>
<tr>
<th scope="col"><strong>Title</strong></th>
<th scope="col"><strong>Call Number</strong></th>
<th scope="col"><strong>Audience</strong></th>
<th scope="col"><strong>Topics</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><em><strong>Gradspot.com's Guide to Life After College</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001805231" target="_blank">HQ2037 .K54 2011</a></td>
<td>Graduates</td>
<td>Life skills; Jobs; Basic personal finance</td>
</tr>
<tr>
<td><em><strong>Street Smarts: Beyond the Diploma</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001924708" target="_blank">HF5382.7 .R363 2011</a></td>
<td>Graduates</td>
<td>Life skills; Jobs; Basic personal finance</td>
</tr>
<tr>
<td><em><strong>CliffsNotes Graduation Debt: How to Manage Student Loans and Live Your Life</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002332043" target="_blank">LB2340 .G63 2014</a></td>
<td>Graduates</td>
<td>Student loans; Debt management</td>
</tr>
<tr>
<td><em><strong>This is Not Your Father's Job Market: Job Seeking Strategies for Today's New College Graduates</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002211864" target="_blank">HF5382.7 .K666 2012</a></td>
<td>Graduates</td>
<td>Jobs</td>
</tr>
<tr>
<td><em><strong>Automatic Wealth for Grads... and Anyone Else Just Starting Out</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001322455" target="_blank">HG179 .M315 2006</a></td>
<td>Graduates</td>
<td>Basic personal finance; Saving; Jobs; Investing; Taxes</td>
</tr>
</tbody>
</table>
</div>
<div id="rank3_display" class="hide_rank">
<h4>Other Groups</h4>
<table id="other" class="tablesorter">
<thead>
<tr>
<th scope="col"><strong>Title</strong></th>
<th scope="col"><strong>Call Number</strong></th>
<th scope="col"><strong>Audience</strong></th>
<th scope="col"><strong>Topics</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><em><strong>Emotional Currency: A Woman's Guide to Building a Healthy Relationship with Money</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002345080" target="_blank">HG179 .L472 2011</a></td>
<td>Women</td>
<td>Money philosophy</td>
</tr>
<tr>
<td><em><strong>Money Girl's Smart Moves to Grow Rich</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001749947" target="_blank">HG179 .A323 2011</a></td>
<td>Women</td>
<td>Basic personal finance; Money management; Debt management; Investing; Retirement; College planning; Taxes</td>
</tr>
<tr>
<td><em><strong>On My Own Two Feet: A Modern Girl's Guide to Personal Finance</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002345081" target="_blank">HG179 .T44 2014</a></td>
<td>Women</td>
<td>Basic personal finance; Saving; Credit cards; Insurance; Budgeting; Investing; Retirement; Student loans; Taxes</td>
</tr>
<tr>
<td><em><strong>From Ramen to Riches: Finding a Job in Your 20s: A Young Professional's Guide to Career Search, Networking, Resume Writing, Interviewing, and Succeeding at Work</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002345101" target="_blank">HF5382.7 .T363 2012</a></td>
<td>Young adults</td>
<td>Jobs</td>
</tr>
<tr>
<td><em><strong>From Ramen to Riches: Building Wealth in Your 20s: Or Spending, Saving, Investing and Managing Your Money to Get Rich Slowly, but Surely</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002345098" target="_blank">HG179 .W66 2010</a></td>
<td>Young adults</td>
<td>Basic personal finance; Saving; Investing; Money management</td>
</tr>
</tbody>
</table>
</div>
<div id="rank4_display" class="hide_rank">
<h4>College Planning and Financial Aid</h4>
<table id="finaid" class="tablesorter">
<thead>
<tr>
<th scope="col"><strong>Title</strong></th>
<th scope="col"><strong>Call Number</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong><em>College Solution: A Guide for Everyone Looking for the Right School at the Right Price</em></strong></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001992920" target="_blank">LB2343.32 .O82 2012</a></td>
</tr>
<tr>
<td><strong><em>Confessions of a Scholarship Winner</em></strong></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002188400" target="_blank">LB2337.4 .E45 2013</a></td>
</tr>
<tr>
<td><strong><em>Financial Aid Handbook: Getting the Education You Want for the Price You Can Afford</em></strong></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001811452" target="_blank">LB2337.4 .S68 2011</a></td>
</tr>
<tr>
<td><strong><em>Getting Financial Aid</em></strong></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002218632" target="_blank">LB2337.2 .G47 2014</a></td>
</tr>
<tr>
<td><strong><em>Getting In: The Zinch Guide to College Admissions and Financial Aid in the Digital Age</em></strong></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002332083" target="_blank">LB2351.2 .G4843 2011</a></td>
</tr>
<tr>
<td><strong><em>How to Get Money for College: Financing Your Future Beyond Federal Aid 2015</em></strong></td>
<td><strong>NOT YET PUBLISHED</strong></td>
</tr>
</table>
</div>
<div id="rank5_display" class="hide_rank">
<h4>For Children and Teenagers</h4>
<table id="childrens" class="tablesorter">
<thead>
<tr>
<th scope="col"><strong>Title</strong></th>
<th scope="col"><strong>Call Number</strong></th>
<th scope="col"><strong>Grade Level</strong></th>
<th scope="col"><strong>Topics</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><em><strong>Do I Need It? Or Do I Want It? Making Budget Choices</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002328192" target="_blank"><strong>JUV</strong> HG179 .L267 2010</a></td>
<td>K - 2</td>
<td>Budgeting; Decision making; Goal setting; Saving; Spending</td>
</tr>
<tr>
<td><em><strong>Fancy Nancy and the Fabulous Fashion Boutique</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=001806573" target="_blank">PZ7.O222 Fhp 2010</a></td>
<td>Pre - 2</td>
<td>Earning money; Goal setting; Problem solving</td>
</tr>
<tr>
<td><em><strong>Isabel's Car Wash</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002328194" target="_blank">PZ7.B1617 Is 2008</a></td>
<td>K - 4</td>
<td>Earning money; Goal setting; Problem solving; Saving</td>
</tr>
<tr>
<td><em><strong>Kids Making Money: An Introduction to Financial Literacy</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002328196" target="_blank"><strong>JUV</strong> HF5392 .R49 2013</a></td>
<td>K - 2</td>
<td>Earning money; Decision making; Goal setting</td>
</tr>
<tr>
<td><em><strong>Money Mama & the Three Little Pigs</strong></em></td>
<td><a href="http://www.linccweb.org/catalog?screen=direct&lib_code=FLCC2500&query=002328215" target="_blank">PZ7.M1986346 Mon 2004</a></td>
<td>Pre - 2</td>
<td>Saving; Investing; Decision making; Budgeting; Giving & charity</td>
</tr>
</tbody>
</table>
</div>
</div>
What do I need to do to get the zebra widget to work on the other tables?
I've searched this site and Google for using the zebra widget in multiple tables, but I think my hidden divs have complicated the issue.
Any help would be greatly appreciated.
I made an update of your JSFiddle that does what I think you want it to actually do.
I also simplified your javascript and fixed a few other problems that were causing it to just not work at all in the HTML, namely your href="rank=<number>"s.