I am trying to create a side navigation populated from the database. I want the categories to show up on the left hand side and when you click on one the others slide down to make room for the sub categories. However I am having trouble getting them to work properly.
I got the main categories up and running and got it to slide down and display a subcategory hard coded saying "hello world" but now i am trying to populate the sub categories with those from the database I am having trouble getting it all to work.
Here is my code:
this is my database connection
<?php
$base = ($_SERVER['HTTPS'] ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . '/';
$mysql_connection = db_connect_enhanced('*********','dbaccess','*******','website'); //Connect to database
$categories = "SELECT * FROM *********** WHERE active = 1";
$result = db_query_into_array_enhanced($mysql_connection, $categories);
$count = count($result);
?>
Here is the code to display my navigation
<div id="left-prod-nav">
<ul>
<li class="top">Product Categories</li>
<?for($i = 0; $i < $count; $i++)
{?>
<div class="flip"><li><img src="images/arrowright_off.gif" style="padding:0px; margin:0px;float:right;"><a href="#"><?=$result[$i]['categoryName']?></a></li> </div>
<? $subCategories = "SELECT * FROM ************* WHERE active = 1";
$subCatResult = db_query_into_array_enhanced($mysql_connection, $subCategories);
$subCount = count($subCatResult);
for($i = 0; $i < $subCount; $i++)
{?>
<div class="panel"><?=$subCatResult[$i]['categoryName']?></div>
<?}?>
<?}?>
</ul>
<div class="clear"> </div>
</div>
Here is the javascript that gets the navigation to slide down and up on click
<script>
$(document).ready(function(){
$(".flip").click(function(){
$(this).next(".panel").slideToggle("slow");
});
});
</script>
as i said, getting the top tier nav to work was fine. it displayed the categories from the database and slid down when clicked. but now im trying to display the sub categories when it slides down I cant.
Any help is greatly appreciated