jQuery Folder Tree Menu

Folder MenuToday I thought that I would put together a simple jQuery folder menu for myself to use in projects to come.  It is easily modified,   easy to create dynamically and easily styled.  The jQuery script portion is rather simple and has been tested on Chrome, FireFox and IE. This is another step in the direction of building a base library of scripts for me to use.

Download full Sample Code: http://www.unlatched.com/sample/foldertree/FolderView.htm

Run Sample Code:  http://www.unlatched.com/sample/foldertree/foldertree.zip
Please feel free to use as you need.

 
Quick peak at the code:

 <script>  
     $(document).ready(function () {  
       $('[id^="subFolder"]').css("display", "none");  
       $('.TopFolder').css("display", "block");  
       $('[id^="expander"]').click(function () {  
         var id = this.id.replace("expander", "");  
         openHide(id);  
         // Open Parents  
         $(this).parents("ul").css("display", "block");  
       });  
       // Open Hide File Nodes  
       function openHide(id) {  
         // Set Icon  
         $('[id^="expander"]').attr('src', 'images/closed.png');  
         $('#expander' + id).attr('src', 'images/open.png');  
         // Close All - Comment out next 3 lines if you want to open all nodes  
         $('[id^="subFolder"]').css("display", "none");  
         $('.TopFolder').css("display", "block");  
         $('#subFolder' + id).css("display", "block");  
         // Set Selected  
         $('[id^="title"]').removeClass("selected");  
         $('.title').removeClass("selected");  
         $('#title' + id).addClass("selected");  
       }  
       // Click Title Handler - With Sub  
       $('[id^="title"]').click(function () {  
         var id = this.id.replace("title", "");  
         openHide(id);  
         // Open Parents  
         $(this).parents("ul").css("display", "block");  
       });  
       // Click Title - No Sub  
       $('.title').click(function () {  
         // Set Selected  
         $('[id^="title"]').removeClass("selected");  
         $('.title').removeClass("selected");  
         $(this).addClass("selected");  
       });  
     });  
   </script>  

Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http://www.unlatched.com/#sthash.8DiTkpKy.dpuf

Posted in Design, Developement, jQuery, Web Tagged with:

Leave a Reply

Your email address will not be published. Required fields are marked *

*