{"id":1216,"date":"2014-02-18T21:00:51","date_gmt":"2014-02-19T02:00:51","guid":{"rendered":"http:\/\/andrewpallant.ca\/wordpress\/?p=1216"},"modified":"2014-03-01T11:39:37","modified_gmt":"2014-03-01T16:39:37","slug":"jquery-folder-tree-menu","status":"publish","type":"post","link":"http:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/","title":{"rendered":"jQuery Folder Tree Menu"},"content":{"rendered":"

\"Folder<\/a>Today I thought that I would put together a simple jQuery folder menu for myself to use in projects to come. \u00a0It is easily modified, \u00a0 easy to create dynamically and easily styled. \u00a0The 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.<\/p>\n

Download full Sample Code:<\/strong>\u00a0http:\/\/www.unlatched.com\/sample\/foldertree\/FolderView.htm<\/a><\/p>\n

Run Sample Code:<\/strong>\u00a0\u00a0http:\/\/www.unlatched.com\/sample\/foldertree\/foldertree.zip<\/a>
\nPlease feel free to use as you need.<\/p>\n

\u00a0<\/span>
\nQuick peak at the code:<\/span><\/p>\n

 <script>  \r\n     $(document).ready(function () {  \r\n       $('[id^=\"subFolder\"]').css(\"display\", \"none\");  \r\n       $('.TopFolder').css(\"display\", \"block\");  \r\n       $('[id^=\"expander\"]').click(function () {  \r\n         var id = this.id.replace(\"expander\", \"\");  \r\n         openHide(id);  \r\n         \/\/ Open Parents  \r\n         $(this).parents(\"ul\").css(\"display\", \"block\");  \r\n       });  \r\n       \/\/ Open Hide File Nodes  \r\n       function openHide(id) {  \r\n         \/\/ Set Icon  \r\n         $('[id^=\"expander\"]').attr('src', 'images\/closed.png');  \r\n         $('#expander' + id).attr('src', 'images\/open.png');  \r\n         \/\/ Close All - Comment out next 3 lines if you want to open all nodes  \r\n         $('[id^=\"subFolder\"]').css(\"display\", \"none\");  \r\n         $('.TopFolder').css(\"display\", \"block\");  \r\n         $('#subFolder' + id).css(\"display\", \"block\");  \r\n         \/\/ Set Selected  \r\n         $('[id^=\"title\"]').removeClass(\"selected\");  \r\n         $('.title').removeClass(\"selected\");  \r\n         $('#title' + id).addClass(\"selected\");  \r\n       }  \r\n       \/\/ Click Title Handler - With Sub  \r\n       $('[id^=\"title\"]').click(function () {  \r\n         var id = this.id.replace(\"title\", \"\");  \r\n         openHide(id);  \r\n         \/\/ Open Parents  \r\n         $(this).parents(\"ul\").css(\"display\", \"block\");  \r\n       });  \r\n       \/\/ Click Title - No Sub  \r\n       $('.title').click(function () {  \r\n         \/\/ Set Selected  \r\n         $('[id^=\"title\"]').removeClass(\"selected\");  \r\n         $('.title').removeClass(\"selected\");  \r\n         $(this).addClass(\"selected\");  \r\n       });  \r\n     });  \r\n   <\/script>  \r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Today I thought that I would put together a simple jQuery folder menu for myself to use in projects to come. \u00a0It is easily modified, \u00a0 easy to create dynamically and easily styled. \u00a0The jQuery script portion is rather simple and has been tested on Chrome, FireFox and IE. This is another step in the … Continue reading jQuery Folder Tree Menu<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112,141,149,96],"tags":[193],"yoast_head":"\r\njQuery Folder Tree Menu - Software Developer In London<\/title>\r\n<meta name=\"description\" content=\"jQuery Folder Tree Menu - Software Developer In London by Andrew Pallant\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"jQuery Folder Tree Menu - Software Developer In London\" \/>\r\n<meta property=\"og:description\" content=\"jQuery Folder Tree Menu - Software Developer In London by Andrew Pallant\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/\" \/>\r\n<meta property=\"og:site_name\" content=\"LDNDeveloper\" \/>\r\n<meta property=\"article:published_time\" content=\"2014-02-19T02:00:51+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2014-03-01T16:39:37+00:00\" \/>\r\n<meta property=\"og:image\" content=\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png\" \/>\r\n<meta name=\"author\" content=\"ldnDeveloper\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:creator\" content=\"@LdnDeveloper\" \/>\r\n<meta name=\"twitter:site\" content=\"@LdnDeveloper\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ldnDeveloper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/\"},\"author\":{\"name\":\"ldnDeveloper\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"headline\":\"jQuery Folder Tree Menu\",\"datePublished\":\"2014-02-19T02:00:51+00:00\",\"dateModified\":\"2014-03-01T16:39:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/\"},\"wordCount\":106,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"image\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png\",\"keywords\":[\"jQuery Made Simple\"],\"articleSection\":[\"Design\",\"Developement\",\"jQuery\",\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/\",\"name\":\"jQuery Folder Tree Menu - Software Developer In London\",\"isPartOf\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png\",\"datePublished\":\"2014-02-19T02:00:51+00:00\",\"dateModified\":\"2014-03-01T16:39:37+00:00\",\"description\":\"jQuery Folder Tree Menu - Software Developer In London by Andrew Pallant\",\"breadcrumb\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#primaryimage\",\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png\",\"contentUrl\":\"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png\",\"width\":301,\"height\":271},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/andrewpallant.ca\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Folder Tree Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#website\",\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/\",\"name\":\"LDNDeveloper\",\"description\":\"Learning, Growing and Sharing.\",\"publisher\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\",\"name\":\"ldnDeveloper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg\",\"contentUrl\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg\",\"width\":512,\"height\":512,\"caption\":\"ldnDeveloper\"},\"logo\":{\"@id\":\"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\"},\"description\":\"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\",\"sameAs\":[\"http:\/\/www.andrewpallant.ca\",\"https:\/\/x.com\/LdnDeveloper\"],\"url\":\"http:\/\/andrewpallant.ca\/wordpress\/author\/ldndeveloper\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Folder Tree Menu - Software Developer In London","description":"jQuery Folder Tree Menu - Software Developer In London by Andrew Pallant","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Folder Tree Menu - Software Developer In London","og_description":"jQuery Folder Tree Menu - Software Developer In London by Andrew Pallant","og_url":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/","og_site_name":"LDNDeveloper","article_published_time":"2014-02-19T02:00:51+00:00","article_modified_time":"2014-03-01T16:39:37+00:00","og_image":[{"url":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png"}],"author":"ldnDeveloper","twitter_card":"summary_large_image","twitter_creator":"@LdnDeveloper","twitter_site":"@LdnDeveloper","twitter_misc":{"Written by":"ldnDeveloper","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#article","isPartOf":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/"},"author":{"name":"ldnDeveloper","@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"headline":"jQuery Folder Tree Menu","datePublished":"2014-02-19T02:00:51+00:00","dateModified":"2014-03-01T16:39:37+00:00","mainEntityOfPage":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/"},"wordCount":106,"commentCount":0,"publisher":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"image":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#primaryimage"},"thumbnailUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png","keywords":["jQuery Made Simple"],"articleSection":["Design","Developement","jQuery","Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/","url":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/","name":"jQuery Folder Tree Menu - Software Developer In London","isPartOf":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#primaryimage"},"image":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#primaryimage"},"thumbnailUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png","datePublished":"2014-02-19T02:00:51+00:00","dateModified":"2014-03-01T16:39:37+00:00","description":"jQuery Folder Tree Menu - Software Developer In London by Andrew Pallant","breadcrumb":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#primaryimage","url":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png","contentUrl":"http:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2014\/02\/Capture.png","width":301,"height":271},{"@type":"BreadcrumbList","@id":"https:\/\/andrewpallant.ca\/wordpress\/jquery-folder-tree-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/andrewpallant.ca\/wordpress\/"},{"@type":"ListItem","position":2,"name":"jQuery Folder Tree Menu"}]},{"@type":"WebSite","@id":"http:\/\/andrewpallant.ca\/wordpress\/#website","url":"http:\/\/andrewpallant.ca\/wordpress\/","name":"LDNDeveloper","description":"Learning, Growing and Sharing.","publisher":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84","name":"ldnDeveloper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg","contentUrl":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg","width":512,"height":512,"caption":"ldnDeveloper"},"logo":{"@id":"http:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/"},"description":"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","sameAs":["http:\/\/www.andrewpallant.ca","https:\/\/x.com\/LdnDeveloper"],"url":"http:\/\/andrewpallant.ca\/wordpress\/author\/ldndeveloper\/"}]}},"_links":{"self":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1216"}],"collection":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/comments?post=1216"}],"version-history":[{"count":9,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1216\/revisions"}],"predecessor-version":[{"id":1240,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/1216\/revisions\/1240"}],"wp:attachment":[{"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/media?parent=1216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/categories?post=1216"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/tags?post=1216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}