tree structure on my website

@luke11May 07.2007

I am developing an existing web site. There are products on the site. The products are put into groups, groups can be also put into other groups – this is a structure like tree.
My question is how to show it on the website? I want to create something like tree menu. It should be possible to expand a group of products after clicking on it and deexpand after clicking again. I hope it is clear.
I know JS a little. Any help will be appreciated.

to post a comment

JavaScript

4 Comments(s) _↴

@CrazyMerlinMay 07.2007 — #Here is a very simple example I just knocked together to show you one way of doing this:

[code=php]
 <html>
 
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 <title>New Page 1</title>
 <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
 <meta name="ProgId" content="FrontPage.Editor.Document">
 <style type="text/css">
 table
 {
 margin-left: 8px;
 display: none;
 }
 
  li
  {
   cursor: pointer;
  }
 </style>
 <script type="text/javascript">
 //you would have one element here for each list item
 //items you want to start hidden should be 0 (zero), otherwise 1
 var showHideFlags = new Array(0, 0, 0);
 function showHide(id)
 {
 id = Number(id.replace('list_',  ''));
 var state = showHideFlags[id - 1];
 var table = document.getElementById("table_" + id);
 if(state == 0)
 {
 table.style.display = "block";
 showHideFlags[id - 1] = 1;
 }
 else
 {
 table.style.display = "none";
 showHideFlags[id - 1] = 0;
 }
 
   return; 
  }
 </script>
 </head>
 
 <body>
 <ul>
 <li id="list_1" onclick="showHide(this.id)">List 1 <br />
 <table id="table_1">
 <tr>
 <td>Item a</td>
 </tr>
 <tr>
 <td>Item b</td>
 </tr>
 <tr>
 <td>Item c</td>
 </tr>
 </table>
 </li>
 <li id="list_2" onclick="showHide(this.id)">List 2 <br />
 <table id="table_2">
 <tr>
 <td>Item d</td>
 </tr>
 <tr>
 <td>Item e</td>
 </tr>
 <tr>
 <td>Item f</td>
 </tr>
 </table>
 </li>
 <li id="list_3" onclick="showHide(this.id)">List 3 <br />
 <table id="table_3">
 <tr>
 <td>Item g</td>
 </tr>
 <tr>
 <td>Item h</td>
 </tr>
 <tr>
 <td>Item i</td>
 </tr>
 </table>
 </li>
 </ul>
 
 </body>
 
 </html>
 [/code]

This is only one way of doing this.

Personally I would make the entire menu system dynamic so it could be stored externally, but I did it this way as you said you know a "little" JS.

The important thing here is to make sure that the table has the same id number as the list item it is in. This will simply reduce code.

Hope this helps.

//erlin!

@luke11authorMay 07.2007 — #OK, that works fine! ?

But I have one problem more. The elements of the tree are kept in a database. It means there are group of products and products. Each of the group can contain another groups and products.How to modify your JS code to managa with that?

@CrazyMerlinMay 08.2007 — #if you are creating the tree from an sql call you will need to produce the items dynamically, unless you always have the same output.

what I mean is that if you are likely to have the same output for a month or more, still use a template, otherwise go dynamic.

taking into account submenu items, you will need to take the script to the next level.

I hope that the following isn't daunting, I will explain it under the code:

[code=php]
 <html>
 
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 <title>New Page 1</title>
 <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
 <meta name="ProgId" content="FrontPage.Editor.Document">
 <style type="text/css">
 table
 {
 margin-left: 8px;
 display: none;
 }
 
  li
  {
   cursor: pointer;
  }
 
  .sublist
  {
   display: none;
  }
 </style>
 <script type="text/javascript">
 //you would have one array here for each list item
 var showHideFlags = new Array(new Array(0, 0, 0, 0), new Array(0), new Array(0));
 var sublist_process = false;
 function showHide(id)
 {
 if(sublist_process)
 {
 sublist_process = false;
 return;
 }
 
   if(id.indexOf('td') == -1)
   {
   id = Number(id.replace('list_',  ''));
   var state = showHideFlags[id - 1][0];
   var el = document.getElementById("table_" + id);
 
   if(state == 0)
   {
   showHideFlags[id - 1][0] = 1;
   }
   else
   {
   showHideFlags[id - 1][0] = 0;
   }
   sublist_process = false;
   }
   else
   {
   id = id.replace('td_',  '');
   id = id.split('_');
   var state = showHideFlags[id[0] - 1][id[1]];
   var el = document.getElementById("sublist_" + id[1]);
 
   if(state == 0)
   {
   showHideFlags[id[0] - 1][id[1]] = 1;
   }
   else
   {
   showHideFlags[id[0] - 1][id[1]] = 0;
   }
   sublist_process = true;
   }
 
 
 
   (state == 0) ? el.style.display = "block" : el.style.display = "none";
 
   return false; 
  }
 </script>
 </head>
 
 <body>
 <ul>
 <li id="list_1" onclick="showHide(this.id)">List 1 <br />
 <table id="table_1">
 <tr>
 <td id="td_1_1" onclick="showHide(this.id)">
 Item a
 <ul id="sublist_1" class="sublist">
 <li>SubItem 1</li>
 <li>SubItem 2</li>
 <li>SubItem 3</li>
 </ul>
 </td>
 </tr>
 <tr>
 <td id="td_1_2" onclick="showHide(this.id)">
 Item b
 <ul id="sublist_2" class="sublist">
 <li>SubItem 1</li>
 <li>SubItem 2</li>
 <li>SubItem 3</li>
 </ul>
 </td>
 </tr>
 <tr>
 <td id="td_1_3" onclick="showHide(this.id)">
 Item c
 <ul id="sublist_3" class="sublist">
 <li>SubItem 1</li>
 <li>SubItem 2</li>
 <li>SubItem 3</li>
 </ul>
 </td>
 </tr>
 </table>
 </li>
 <li id="list_2" onclick="showHide(this.id)">List 2 <br />
 <table id="table_2">
 <tr>
 <td>Item d</td>
 </tr>
 <tr>
 <td>Item e</td>
 </tr>
 <tr>
 <td>Item f</td>
 </tr>
 </table>
 </li>
 <li id="list_3" onclick="showHide(this.id)">List 3 <br />
 <table id="table_3">
 <tr>
 <td>Item g</td>
 </tr>
 <tr>
 <td>Item h</td>
 </tr>
 <tr>
 <td>Item i</td>
 </tr>
 </table>
 </li>
 </ul>
 
 </body>
 
 </html>
 [/code]

Okay, so we have stepped up a level here by first of all making the array called "showHideFlags" a multi-dimensional array.....an array that has arrays.

Don't worry it's not complicated, its like table within a table in html.

taking a look at this:

<i>
 </i>new Array(new Array(0, 0, 0, 0), new Array(0), new Array(0))

This array's first element is an array of 4 elements. The first element relates to the parent item in the tree, which in this case is "list_1".

The next 3 items are the items "sublist_1", "sublist_2", "sublist_3".

Instead of me explaining the whole thing to you in detail, let me know if you cannot adapt it and I'll explain how to.

Alternatively if you do need to generate a purely dynamic menu from differing data, let me know and I'll show you how to code that approach.

Hope you find this useful.

//erlin!

@luke11authorMay 08.2007 — #OK, thank you very much. Unfortunatelly I have decided to change the solution. So I am not going to use that JS menu actually.

Anyway thx!

Also in #JavaScript _↴

Iframe and Parent Frame childnode loop in IE6 Dynamicly loading images, are they loaded?

Success!

Help @luke11 spread the word by sharing this article on Twitter...

Tweet This

tree structure on my website

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

tree structure on my website

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴