Sidebar Subfolders Expand/Collapse Items Option

[manos@dynamitec]

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

[Daniel]

No photo

[manos@dynamitec]

No photo

Hello Daniel.

Thank you for your indication.

Updated! Forgot to click on the Add Attachment button 

Regards,

[admin]

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');
});

[manos@dynamitec]

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. 

[Simuzer]

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.

[admin]

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');
});