Customizing Simple jQuery Tree View (Multi-Level) to add accordion effect to first level

Firstly you should show the original Simple jQuery Tree site jQuery Simple TreeView Plugin

after you briefly review the options for the plugin as

1. open:  "▼", // HTML string to display for the opened handle
2. close: "►", // HTML string to display for the closed handle
3. slide: false, // Boolean flag to indicate if node should slide open/close
4. speed: 'normal', // Speed of the slide. Can be a string: 'slow', 'fast', or a number of milliseconds: 1000
5. collapsed: false, // Boolean to indicate if the tree should be collapsed on build
6. collapse: null, // A node to collapse on build. Can be a string with indexes: '0.1.2' or a jQuery ul: $("#tree ul:eq(1)")
7. expand: null // A node to expand on build. Can be a string with indexes: '0.1.2' or a jQuery ul: $("#tree ul:eq(1)")

and basic installation as


    $(document).ready(function() {
         $("ul#sitemap").simpletreeview();
    });


now we will describe the customized method that will add accordion effect to the first level of the tree

1. function toggle($ul, method, callback)
2.     // this method customized by Ahmed Gouda to support accordion effect
3.     // only for first level and also highlighting anchor elements
4.     // Set callback to empty function if undefined
5.     if (callback === undefined) callback = function() { };
7.     var $handle = $ul.parent("li").children("span.handle");
8.     var $anchor = $ul.parent("li").children("a");
10.     if ($ul.is(':hidden') && $ul.hasClass('SecondLevelUL')) {
11.         $('ul.SecondLevelUL').each(function(){
12.         $(this).parent("li").children("span.handle").html(settings.close);
13.           $(this).parent("li").children("a").css('font-weight', 'normal');
14.             $(this).slideUp(settings.speed, callback);
15.         });
16.        }
18.     if (method == "open") {
19.         $handle.html(settings.open);
20.         $anchor.css('font-weight', 'bold');
22.         if (settings.slide) { $ul.slideDown(settings.speed, callback); }
23.         else { $ul.show(); callback(); }
24.     }
25.     else if (method == "close") {
26.         $handle.html(settings.close);
27.         $anchor.css('font-weight', 'normal');
29.         if (settings.slide) { $ul.slideUp(settings.speed, callback); }
30.         else { $ul.hide(); callback(); }
31.     }
32.     else {
33.         $handle.html($ul.is(':hidden') ? settings.open : settings.close);
34.         if ($ul.is(':hidden'))
35.             $anchor.css('font-weight', 'bold');
36.         else
37.             $anchor.css('font-weight', 'normal');
39.         if (settings.slide) { $ul.slideToggle(settings.speed, callback); }
40.         else { $ul.toggle(); callback(); }
41.     }
42. }

and here the sample implementation

1. <script type="text/javascript">
2.     $(document).ready(function() {
3.         var sitemap = $("#sitemap").simpletreeview({
4.             open: '<span style="color: #900;">&darr;</span>',
5.             close: '<span style="color: #090;">&rarr;</span>',
6.             slide: true,
7.             speed: 'fast',
8.             collapsed: true,
9.             expand: '0'
10.         });
12.         $('a.expand').click(function() {
13.             sitemap.expand($(this).attr('rel'));
14.         });
16.         $('a.collapse').click(function() {
17.             sitemap.collapse($(this).attr('rel'));
18.         });
19.     });                      
20. </script>

and you can find complete sample from here



keep commenting.