Category List and Automatic jQuery classes

Question

Objective and layout:

1. I have two separate divs (this is in a Custom Page template). DIV1 has a listing subcategories of a specified parent category.
2. Clicking on any of the listed subcats brings up a list of posts in that category in DIV2. Just the titles with links to the posts.

It's working now, but it's half manual.

Code in 1st DIV:

<?php $products = get_categories('child_of=1143&hide_empty=1');
  foreach ( $products as $product ) {
  echo '<li><a href="#" class='. $product->cat_ID .'>'.$product->cat_name.'</a></li>';
  } ?>

Code in 2nd DIV:

<!-- post lists -->
<ul id="list1" style="display: none;">
<?php $my_query = new WP_Query('category_name=lightbulbs&showposts=25&post_type=product&orderby=title&order=asc');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

<ul id="list2" style="display: none;">
<?php $my_query = new WP_Query('category_name=refrigerators&showposts=25&post_type=product&orderby=title&order=asc');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
</ul>
</div>
<!-- / post lists -->

Script that makes it all work:

• http://code.jquery.com/jquery-latest.js in the header

• Plus this:

                  <script>
                  $(document).ready(function() {
                      var h1 = $("#list1").height();
                      var h2 = $("#list2").height();
                      $("#list1,#list2").height(Math.max(h1, h2));
                      $("#list2").hide();
                  });
  
                  $("#link1").live('click', function() {
                      $("#list1").show();
                      $("#list2").hide();
                  });
  
                  $("#link2").live('click', function() {
                      $("#list2").show();
                      $("#list1").hide();
                  });
              </script>
  

I wanted to see if there's a way to automate the second part. When I add a new subcategory, it gets listed in DIV1 automatically, but to show the posts in that category in DIV2, I have to manually a) add the div with the new list, and b) classes to the script.

Answer 1

Same principle applies:

1. You are looping through all products to generate first div.
2. Now take same list of products and generate list of posts for it in second div.
3. Count how many products you have and generate that many classes in your JS code.