Need help with a vertical dynamic expanding menu system

[ebolt007]

Hello;

 

I'm trying to make an expanding menu system that expands in seperate divs. I can get it to expand on click in the main div using javascript, but the menu system needs to expand to the right on each click. Can anyone help me do this? Here is what I have for code on the first div, and a link to the site so you can better understand what I am going after.  I put the code in a function so I can call it on the other div's and I can click and expand the other div but I need it to merely show the items on the second div when the Categories are clicked, then when an item is clicked, in the third panel I need it to show the description and price. http://www.colonialhousernb.com/newsite/menutest_eric.php

 

<a href="javascript:toggle('cntBreakfast');">Breakfast</a><br /> 
     <div id="cntBreakfast' class='cont">        <?php
      function breakfast(){
                   $currentdate = date('Y-m-d'); 
                    $menu_query = "SELECT Menu.*, Category.Category FROM Menu, Category WHERE Menu.BCategory=Category.CatID and Menu.BCategory > '0' Order By Category.Category, Menu.Item"; 
                    $menu_query_result = mysql_query($menu_query); 
                    $oldCategory = "";  
                    
                    while ($row = mysql_fetch_assoc($menu_query_result))  
                            {  
                            if ($oldCategory != $row['Category'])  
                                    {  
                                    echo ($oldCategory!="" ? "</div>" : "");  
                                    echo "<div class='menu_header'>";  
                                    echo "<a href=\"javascript:toggle('d" . $row["BCategory"] . "')\">" . $row['Category'] . "</a></div><div class=\"cont\" id=\"d" . $row["BCategory"] . "\">";  
                                    $oldCategory  = $row['Category'];  
                                    }  
                            echo "<div class='menu_item'>"; 
                    		  echo "<a href=\"javascript:toggle('f" . $row["Item"] . "')\">" . $row['Item'] . "</a></div><div class=\"cont\" id=\"f" . $row["Item"] . "\">";   
                    //        echo $row['Item'], "-"; 
                    		echo $row['Description'], "-";  
                            echo $row['Price'], "</div>\n";  
                                
                            }  
                            }
                            
                            
      
      
                        
                        echo breakfast();
            

                    ?></div>

[Jax2]

This would probably be better for the JS forums, imo...

[ebolt007]

If I can do this without Javascript I would prefer doing it that way. I have another test page showing how these should be laid out in <li>'s but I need them clickable like the top example so they don't show up in the 2 right columns until the first column "category" is clicked on. Here is the example code for this, but how do I break it apart to have these clickable so the other corresponding rails then show up as you click on an item, basically like tabs but sideways I guess?  Here's my middle rail code. and the new link to another example look and feel if everything were expanded.  http://www.colonialhousernb.com/newsite/menutest_eric2.php

 

<div class="mid_rail">

        <div class="mid_rail_top">  </div>

         <div class="mid_rail_mid" id="items"> 


                       
<?php

                   $currentdate = date('Y-m-d'); 
                    $menu_query = "SELECT Menu.*, Category.Category FROM Menu, Category WHERE Menu.BCategory=Category.CatID and Menu.BCategory > '0' Order By Category.Category, Menu.Item"; 
                    $menu_query_result = mysql_query($menu_query); 
                    $oldCategory = "";  
                    
                    while ($row = mysql_fetch_assoc($menu_query_result))  
                            {  
                            if ($oldCategory != $row['Category'])  
                                    {  
                                    echo ($oldCategory!="" ? "" : "");  
                                    $row_item = $row["Item"];
                                    echo  "<ul>\n" ;
                                    echo  "<li>$row_item</li>\n";  
                                     echo  "</ul>\n"; 
                                    $oldCategory  = $row['Category'];  
                                    }  

                                
                            }  


                    ?>

                    



         </div>

      <div class="mid_rail_bot">  </div>

    </div>