BeWebmaster

Creating DHTML tree-like navigation

Ad

Learn how to create javascript (DHTML) tree-like navigation with items that expand and collapse.  

The sections of colapsible items will be defined using a div tag.

We will first create a function that uses style.display property to expend or collapse a specific item.

<script language="javascript" type="text/javascript">
    function navigate(link) {
       // Let's get the object and check the status using visible variable
       var obj=document.getElementById(link);
       var visible=(obj.style.display != "none");

       // Here we will switch between expand and collapse
       if(visible){
          obj.style.display = "none";
       }else{
          obj.style.display = "block";
       }
    }
</script>

Place the above code between the head tags of your HTML document. Now lets create the navigation to put in the body of your HTML document.

<strong> <a href="javascript:navigate('home');">Home</a> </strong><br />
<div id="home" style="display:none; margin-left:20px">
   <a href="item1.htm">Item 1</a> <br />
   <a href="item2.htm">Item 2</a> <br />
   <a href="item3.htm">Item 3</a> <br />
</div>

<strong> <a href="javascript:navigate('about');">About</a> </strong><br />
<div id="about" style="display:none; margin-left:20px">
   <a href="item1.htm">Item 1</a> <br />
   <a href="item2.htm">Item 2</a> <br />
   <a href="item3.htm">Item 3</a> <br />
</div>

<strong> <a href="javascript:navigate('products');">Products</a> </strong><br />
<div id="products" style="display:none; margin-left:20px">
   <a href="item1.htm">Item 1</a> <br />
   <a href="item2.htm">Item 2</a> <br />
   <a href="item3.htm">Item 3</a> <br />
</div>

Here is Sample:

Home
About
Products