How to create auto collapsed all list item in Jquery nestable?

Question

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 plugin.

 $(document).ready(function(){
   $("#product_list").nestable({
      maxDepth: 10,
      collapsedClass:'dd-collapsed',
   });
 });

Answer 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

Answer 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");

Answer 3

Just call the function:

$('.dd').nestable('collapseAll');