CODEWITHSUNDEEP
javascriptjqueryjquery-nestable
DMS-KH
DMS-KH

Reputation: 2797

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

Upvotes: 3

Views: 5817

Answers (3)

Stephen85
Stephen85

Reputation: 270

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

Upvotes: 0

Bruno Severo
Bruno Severo

Reputation: 1

Just call the function:

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

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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

Upvotes: 13

Related Questions