title: Collapse and Expand Tree structure in Javascript
body: <p>I need a help on collapse and Expand using Javascript.
  Here is my running code (.html)</p>
  
  <blockquote>
  <pre><code> &lt;h2&gt;Test&lt;/h2&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
       &lt;META http-equiv="Content-Type" content="text/html; charset=utf-16"&gt;
       &lt;title&gt;&lt;/title&gt;
       &lt;script type="text/javascript"&gt;  
          function toggleDisplay(element) 
          {       
            element.style.display = element.style.display === 'none' ? '' : 'none'; 
          };
          function toggleDisplayAll(elements) 
          { 
            for(var i=0; i&lt;elements.length; i++)
             {
                toggleDisplay(elements[i]);
             }
          }   
       &lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;  
      &lt;ul&gt;
        &lt;a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('ul')); return false;" href="#"&gt;Name:&lt;/a&gt;
          &lt;ul style="display:none;"&gt;
          &lt;a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('ul')); return false;" href="#"&gt;Address: &lt;/a&gt;
              &lt;ul style="display:none;"&gt;
              &lt;a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('li')); return false;" href="#"&gt;Subject: &lt;/a&gt;
                  &lt;ul style="display:none;"&gt;
                      &lt;li style="display:none;"&gt;Id
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/ul&gt;
           &lt;/ul&gt;
       &lt;/ul&gt;
    &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  </blockquote>
  
  <p>If you run this html, you will get out put as</p>
  
  <blockquote>
  <pre><code> Name
  </code></pre>
  </blockquote>
  
  <p>on click of Name, it is showing all the child elements</p>
  
  <blockquote>
  <pre><code> Name:
      Address:
          Subject:
  </code></pre>
    
    <p>On click of Subject it is showing Id</p>
  
  <pre><code>  Name:
      Address:
          Subject:
                 . Id
  </code></pre>
    
    <p>What i want here is each child should open only on parent click.</p>
  </blockquote>
  
  <p>When run the html, only Name will dispaly</p>
  
  <blockquote>
  <pre><code>  Name:
  </code></pre>
    
    <p>On click of Name, only Address will be displayed as a child element.</p>
  
  <pre><code>   Name:
          Address:
  </code></pre>
  </blockquote>
  
  <p>Onclick of Address, only Subject will display</p>
  
  <blockquote>
  <pre><code>   Name:
          Address:
              Subject:
  </code></pre>
  </blockquote>
  
  <p>Than finally on click of Subject, id will show up </p>
  
  <blockquote>
  <pre><code>   Name:
          Address:
              Subject:
                   . Id
  </code></pre>
  </blockquote>
  
  <p>How to implement this tree structure. what i am doing wrong here. please suggest me.</p>