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>

[ebolt007]

OK I fixed most of this problem and the only problem I have left is this only toggles one item on or off rather than the full array. For example when you click on Cereal in the first column it should turn on and off all the cereal items, 3 of them, but it only does the first item. Here is the link and the code I am using for the first 2 divs, any help would be greatly appreciated! http://www.colonialhousernb.com/newsite/menutest_eric3.php  (I left the display for the 2nd area turned on at load so you can see it has 3 items in the BCategory, but only the first one is toggling.)

 

    <div class="left_rail">
        <div class="left_rail_top">  </div>
         <div class="left_rail_mid">

<a href="javascript:toggle('cntBreakfast');">Breakfast</a><br /> 
     <div id="cntBreakfast' class='cont1">        <?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!="" ? "</div>" : "");  
                                    echo "<div class='menu_header'>";  
                                    echo "<a href=\"javascript:toggle('b" . $row["BCategory"] . "')\">" . $row['Category'] . "</a></div><div class=\"cont\" id=\"a" . $row["BCategory"] . "\">";  
                                    $oldCategory  = $row['Category'];  
                                    }  

                                
                            } 
                          
                            
                            
      

            

                    ?></div>

                    </div>

        

      <div class="left_rail_bot">  </div>
       </div>

 

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

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

<a href="javascript:toggle('cntBreakfast');"></a><br /> 
     <div id="cntBreakfast' class='cont"> 
<?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))  
                            {  
                            
                          echo "<div class=\"cont2\"  id=\"b" . $row["BCategory"] . "\">";
                          echo $row["Category"];
                    		  echo "<a href=\"javascript:toggle('c" . $row["Description"] . "')\">" . $row['Item'] . "</a>";   
                          echo "</div>\n";         
                            } 
                            ?>

         </div>

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

    </div>

[JustLikeIcarus]

Your main issue is that you have duplicate id attributes.  Meaning the left menu has an id="d7" and the related item in the right menu has id="d7".  This is breaking your javascript since you can not have duplicate id attributes in a document.