This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Sidebar Subfolders Expand/Collapse Items Option
#1
Dear All,

I am having a large project with 60+ rooms to visualize which will be grouped by floor and I would like to avoid a long scrolling list on the sidebar. I like the docked sidebar and the function when clicking on the right side (arrow) of the Folder Title a new tab will open showing only the items contained in the particular subfolder but I would like to ask how could I create a custom function by clicking on the Subfolder title to toggle between Expand and Collapse of the items that are under it. Please see the attached photo.

Thank you in advance.

Best regards

Attached Files Thumbnail(s)
   
Reply
#2
No photo Smile
------------------------------
Ctrl+F5
Reply
#3
(17.09.2018, 09:26)Daniel. Wrote: No photo Smile

Hello Daniel.

Thank you for your indication.

Updated! Forgot to click on the Add Attachment button  Rolleyes

Regards,
Reply
#4
Try this Custom JavaScript. All sub-menus will be in collapsed state by default, apart from the menu with currently selected plan. This menu cannot be collapsed.
Code:
$(function() {
  var items = $('.nav li');
  
  $('.level').on('vclick', function() {
    var li = $(this), sub = [];
    
    while (true) {
      li = li.next();
      if (!li.length || li.hasClass('level')) {
        break;
      }
      
      if (li.hasClass('active')) {
        return;
      }
      
      sub.push(li);
    }
    
    $.each(sub, function(_, li) {
      li.toggleClass('hide');
    });
  }).trigger('vclick');
});
Reply
#5
(17.09.2018, 09:47)admin Wrote: Try this Custom JavaScript. All sub-menus will be in collapsed state by default, apart from the menu with currently selected plan. This menu cannot be collapsed.
Code:
$(function() {
 var items = $('.nav li');
 
 $('.level').on('vclick', function() {
   var li = $(this), sub = [];
   
   while (true) {
     li = li.next();
     if (!li.length || li.hasClass('level')) {
       break;
     }
     
     if (li.hasClass('active')) {
       return;
     }
     
     sub.push(li);
   }
   
   $.each(sub, function(_, li) {
     li.toggleClass('hide');
   });
 }).trigger('vclick');
});

Works Great! Thank you very much.  Shy
Reply
#6
hi all,

Is it possible that only one open by cliick ?

I don't want it to be open more than once.

Thanks for now.

Attached Files Thumbnail(s)
       
Reply
#7
Try this:
Code:
$(function() {
  var plans = $('.nav li').not('.disabled');
  
  $('.level').on('vclick', function() {
    var li = $(this), sub = [];
    
    while (true) {
      li = li.next();

      if (!li.length || li.hasClass('level')) {
        break;
      }
      
      sub.push(li.get(0));
    }

    plans.each(function(_, li) {
      if (sub.indexOf(li) < 0) {
          $(li).addClass('hide');
      }
      else {
        $(li).toggleClass('hide');
      }
    });
  });
  
  plans.addClass('hide');
  
  var li = $('.nav .active').prevAll('.disabled')[0];
  $(li).trigger('vclick');
});
Reply


Forum Jump: