How To Create Auto Collapsed All List Item In Jquery Nestable?

I'm using Jquery plugin Nestable for menus editor. I want all menu items to auto collapse, but also to expand when a user clicks on each expandable icon. Here is Jquery Nestable pl

Solution 1:

Since there isn't much option available in this plugin what you can do is manually collapse once the nestable has been created as below:

$(document).ready(function(){
   $("#product_list").nestable({
      maxDepth: 10,
      collapsedClass:'dd-collapsed',
   }).nestable('collapseAll');//Add this line//$("#product_list").nestable('collapseAll') //Or this
});

DEMO with expanded view without collapsing on load and

DEMO with collapsed view on load

Solution 2:

To expand on the auto-collapse which Guruprasad had a good answer for, here is a simple way to remove all collapsed, equivalent to what your 'Collapse All' button would do.

$(".dd-collapsed").removeClass("dd-collapsed");