Tabbed Posts

I am trying to build a template for a hardware review site. We want to use a tabbed interface for the recent reviews similar to what you find on many news and sports team sites where the reader can click a tab and it will show a different excerpt for each one. Clicking the Read More link in the excerpt will bring the reader to the post.

I found just what I thought I needed in some JavaScript I got from Dynamic Drive (http://dynamicdrive.com) called Tab Content Script. So I re-wrote The Loop to populate the DIVs required and I get…. nothing.

Looking at the source code you can see that it is properly generated when compared to the sample code from the site, but I just get blank tabs.

Here is the code from my index.php
<div id="content"> <!-- Begin Content -->
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">1</a></li>
<li><a href="#" rel="tcontent2">2</a></li>
<li><a href="#" rel="tcontent3">3</a></li>
<li><a href="#" rel="tcontent4">4</a></li>
<li><a href="#" rel="tcontent5">5</a></li>
</ul>
<div class="tabcontentstyle">
<?php $rev_counter = 1; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : ?>
<?php the_post(); ?>
<?php if ( in_category('3')): ?>
<?php $tcontent = 'tcontent'.$rev_counter; ?>
<div id="<?php echo $tcontent; ?>" class="tabcontent"> <!-- Being tcontent / tabcontent -->
<div class="post" id="post-<?php the_ID(); ?>"> <!-- Begin Post -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entry"> <!-- Begin Entry -->
<?php the_content('Read the rest of this article &raquo;'); ?>
</div> <!-- End entry -->
<p class="category">Posted on <?php the_time('jS F Y') ?> by <?php the_author(); ?><br/>
Under: <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div> <!-- End Post -->
</div> <!-- End tcontent -->
<p> This is tab number <?php echo $rev_counter; ?></p>
<?php $rev_counter = $rev_counter + 1; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</div> <!-- End tabcontentstyle -->
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>


You can see the site and the source code at http://nervoused.com/gvl3. It is still very early in the development phase and not anywhere near complete yet.

Any advice would be appreciated.
TIA