Objective and layout:
- I have two separate divs (this is in a Custom Page template). DIV1 has a listing subcategories of a specified parent category.
- 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.