www.webdeveloper.com
Results 1 to 2 of 2

Thread: Tree menu - expand by default instead of collapse

  1. #1
    Join Date
    Aug 2013
    Posts
    1

    Tree menu - expand by default instead of collapse

    Hi guys,

    I love this expanding tree menu code below and want to use it almost exactly as it is:

    http://cssdeck.com/labs/twitter-boot...ible-tree-menu

    the only problem is that the menu is expanded by default... can anyone work out how to have it collapsed (closed) by default instead?

    Any help appreciated, thank you!!

  2. #2
    Join Date
    Dec 2012
    Posts
    46
    Hi

    So the working menu code is
    Code:
    $(document).ready(function () {
    	$('label.tree-toggler').click(function () {
    		$(this).parent().children('ul.tree').toggle(300);
    	});
    });
    If you notice that
    Code:
    $(this).parent().children('ul.tree').toggle(300);
    Is the line of code that actually toggles the menu. So you could simply add a version of that code above so that it toggles the menu when loaded. Since a toggle is either on or off if it starts on it will start off.
    The thing to keep in mind is $(this) is equivalent to $('label.tree-toggler')
    So we can adjust the code to:
    Code:
    $(document).ready(function () {
      $('label.tree-toggler').parent().children('ul.tree').toggle(300);
      $('label.tree-toggler').click(function () {
        $(this).parent().children('ul.tree').toggle(300);
      });
    });
    Now this works but if you are like me you are going to remember the rules of a programmer are don't repeat yourself especially if you are repeating requests to the DOM. So if you find you are going to have to grab this 'label-tree-toggler' multiple times you could use a code such as:

    Code:
    $(document).ready(function () {
      var Tree = 'label.tree-toggler';
      $(Tree).parent().children('ul.tree').toggle(300);
      $(Tree).click(function () {
        $(this).parent().children('ul.tree').toggle(300);
      });
    });
    Hope this helps!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles