How can I create a sidebar similar to that on this site http://jualbelioke.com/ or a better one? The code snippet am using has the capacity to add just one subcategory under a parent category.
<div class="category">
<img class="expand" src="<?php echo osc_current_web_theme_url('images/right-arrow.png') ; ?>" alt="Collapsed" class="expand" />
<h1><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a>
<span>(<?php echo osc_category_total_items() ; ?>)</span>
</h1>
<?php if ( osc_count_subcategories() > 0 ) { ?>
<ul class="subcategory">
<?php while ( osc_has_subcategories() ) { ?>
<li><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></li>
<?php } ?>
</ul>
<?php } ?>
</div>
and
<script type="text/javascript">
$(document).ready(function() {
$('.subcategory').toggle();
$('.expand').live('click',function(){
$(this).parents('.category').find('.subcategory').toggle();
if ($(this).attr("alt") == "Collapsed") {
$(this).attr("alt", "Expanded").attr("src", "<?php echo osc_current_web_theme_url('images/down-arrow.png') ; ?>");
}
else
{
$(this).attr("alt", "Collapsed").attr("src", "<?php echo osc_current_web_theme_url('images/right-arrow.png') ; ?>");
}
});
});
</script>
But all it did was mess up the site am working on. Am trying to get the category sidebar done to the one similar to picture 2 below or something better. Moreso, I also need help in reducing the drop down menu bar I also created.
[ATTACH]4599[/ATTACH] and [ATTACH]4601[/ATTACH]
Sidebar.png
Category_Bar.png
