Java Developers Book: Jquery

Thursday, 18 September 2014

Create a simple tree view effect using Jquery / Javascript

Create a tree view using javascript is one of the important needs in the UI development where document repository is implemented.The example below shows it how to do it.

Here the logic is like

The sub div for the parent div must have the same class as that of the parent div id.

An event handler is written on the parent div click which toggles all the div with class as the "one" It is shown in the script tag.

 <html>  
 <head>  
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
 </head>  
 <body>  
   <div id="one" style="" >  
     C:  
      </div>  
           <div class="one" style="margin:14px;color:#ccddaa;">  
             Program files  
           </div>  
           <div class="one" style="margin:14px;color:#ccddaa;">  
             Windows  
           </div>  
           <div class="one" style="margin:14px;color:#ccddaa;">  
             Users  
           </div>       
 <script>  
           $("#one").click(function(){  
                var id = $(this).attr('id');  
                $("."+id).toggle();  
           });  
      </script>  
  </body>  
 </html>