javascriptjqueryjquery-nestable

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

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

  • 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