Toggling and Hierachy

[Jeigh]

I'm quite new to Javascript but I'm planning to pick up a bit of it as I incorporate it into a new site I'm making. I'm using the following script to toggle div elements:

 

function getObject(id)
{
      var obj = null;

      if(document.getElementById)
           obj = document.getElementById(id);
      else if(document.all)
           obj = document.all[id];
      else if(document.layers)
           obj = document.layers[id];

      return obj;
}


function toggleObject(id)
      {
      var obj = getObject(id);


      if(!obj)
           return false;

      if(obj.style.display == 'none')
      {
           obj.style.display = '';
      }

      else
      {
           obj.style.display = 'none';
      }

      return true;
} 

 

Im attempting to make a hierachy style menu like the following:

 

Books

-book1

-book2

Pencils

-pencil1

-pencil2

Rulers

-ruler1

-ruler2

 

etc. I've managed to do this fine with PHP and MySQL however I'm trying to incorporate javascript to only show the parents of each category, and only display the children when clicked. To do this I'm using the following PHP / JS: (Not too sure whether the problem lies within the JS or PHP)

 

$parent_array is an array storing all the information in the database for each entry. It is set up so there is a column called 'child_of' if the row is set as a child it uses the number stored in 'child_of' which is the id of its parent.

 

foreach($parent_array as $parent)
{
   $title = $parent['title'];
   $link = $parent['link'];
   $id = $parent['id'];
   
   
   echo "<div id=\"parent\" style=\"display: block\"><a href=\"#\" onclick=\"return !toggleObject('$id');\">$title</a> - <a href=\"$link\" target=\"_blank\">$link</a></div>";
   echo "<br />";
   $parent_for = $parent['id'];
   $child_q = "SELECT * FROM table WHERE child_of ='$parent_for' AND username ='$username'";
   
   $child_array = $db->query($child_q);
   
//Display Children
foreach($child_array as $child) 
   {
   $c_title = $child['title'];
   $c_link = $child['link'];
   
         
         echo "<div id=\"$id\" style=\"display: none\"><a href=\"$c_link\" target=\"_blank\">$c_title</a>";
	 echo "<br /><br />";
      
   }

}

 

The result this gives me is similar to what I want but it works more like a folder system. It will only display the first parent eg:

 

Books

 

Once books is clicked it reveals books children and the parent for the next category eg:

 

Books

-book1

-book2

-Pencils

 

Then clicking pencils will do the same again:

 

Books

-book1

-book2

-Pencils

--pencil1

--pencil2

--Rulers

 

and so on. I'm not sure why this is happening, I checked the output on the source code and all the children are set to display: none; and the parents are not.

 

I hope I've explained well enough and I appreciate any help. Thank You.