jQuery tabs displaying posts on index – Could use some help.

Hello everyone, I’m stuck in a pickle and would appreciate any help.
I’ve been working on a theme and I’m just about done with it, but I hit a snag. On the index page, the goal is to have posts in tabs after the headline post, and before some single posts. I have every other function of the theme done but this one. So you can guess how frustrated I’ve been getting. ??

Now I can get it to work when it’s just displaying one post. The code looks like this…

<div id="tabs">
<?php
query_posts( 'showposts=1&offset=1' );
if (have_posts()) :
while (have_posts()) : the_post(); $category = get_the_category();
?>
<ul>
<li><a href="#tabs-1"><?php echo $category[0]->cat_name; ?></a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
<div class="post-image left">
<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=150&h=100&zc=1" alt="<?php the_title(); ?>" />
</div><!--END post-image-->
<?php endif; ?>
<div class="post-inner-box-2 left">
<h3 class="post-title-box left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<br />
<div class="post-intro-box">
<?php the_excerpt( '' ); ?>
</div><!-- End post-intro -->
<div class="continue-reading-box">
<a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="More <?php the_title_attribute(); ?>">Continue Reading</a>
</div>
<?php
endwhile;
endif;
?>
</div><!--END tab-1-->
<div id="tabs-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a pretium enim. Nulla ornare metus ut enim pharetra sit amet consectetur neque euismod.
</div><!--END tab-2-->
<div id="tabs-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a pretium enim. Nulla ornare metus ut enim pharetra sit amet consectetur neque euismod.
</div><!--END tab-3-->
</div><!--END tabs-->

But when I try to do more then one post, it doesn’t work, and the code looks like this…

<div id="tabs">
<?php
query_posts( 'showposts=3&offset=1' );
if (have_posts()) :
while (have_posts()) : the_post(); $category = get_the_category();
?>
<ul>
<li><a href="#tabs-1"><?php echo $category[0]->cat_name; ?></a></li>
<li><a href="#tabs-2"><?php echo $category[0]->cat_name; ?></a></li>
<li><a href="#tabs-3"><?php echo $category[0]->cat_name; ?></li>
</ul>
<div id="tabs-1">
<?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
<div class="post-image left">
<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=150&h=100&zc=1" alt="<?php the_title(); ?>" />
</div><!--END post-image-->
<?php endif; ?>
<div class="post-inner-box-2 left">
<h3 class="post-title-box left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<br />
<div class="post-intro-box">
<?php the_excerpt( '' ); ?>
</div><!-- End post-intro -->
<div class="continue-reading-box">
<a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="More <?php the_title_attribute(); ?>">Continue Reading</a>
</div>
</div><!--END tab-1-->
<div id="tabs-2">
<?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
<div class="post-image left">
<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=150&h=100&zc=1" alt="<?php the_title(); ?>" />
</div><!--END post-image-->
<?php endif; ?>
<div class="post-inner-box-2 left">
<h3 class="post-title-box left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<br />
<div class="post-intro-box">
<?php the_excerpt( '' ); ?>
</div><!-- End post-intro -->
<div class="continue-reading-box">
<a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="More <?php the_title_attribute(); ?>">Continue Reading</a>
</div>
</div><!--END tab-2-->
<div id="tabs-3">
<?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
<div class="post-image left">
<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=150&h=100&zc=1" alt="<?php the_title(); ?>" />
</div><!--END post-image-->
<?php endif; ?>
<div class="post-inner-box-2 left">
<h3 class="post-title-box left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<br />
<div class="post-intro-box">
<?php the_excerpt( '' ); ?>
</div><!-- End post-intro -->
<div class="continue-reading-box">
<a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="More <?php the_title_attribute(); ?>">Continue Reading</a>
</div>
</div><!--END tab-3-->
<?php
endwhile;
endif;
?>
</div><!--END tabs-->

Right away I’m thinking the problem is with the unsorted list area then the content div’s… Although I might be wrong.

So what do you guys think?

Oh! FYI: I’m using the latest version of jQuery.

Thanks for any help.