title: Nested sortable not collapsing/expanding properly
body: <p>The <code>nestedSortable</code> jQuery plugin does not work properly when trying to use it in with the example provided on its website.</p>
  
  <p>Dragging and dropping works, but when I need to collapse/expand a problem occurs. I used a solution suggested in another question and while it works for two level lists, it doesn't for 3 or more levels.</p>
  
  <p><strong>Example</strong>: after clicking on 2nd level element (<code>Sub Item 3.2</code>), instead of expanding it, the 1st level element (<code>Item 2</code>) gets closed.</p>
  
  <p>I'm looking for a solution that works with 3 or more levels.</p>
  
  <p><a href="https://jsfiddle.net/vs535823/" rel="nofollow">https://jsfiddle.net/vs535823/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('ol.sortable').nestedSortable({
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '&gt; div',
    maxLevels: 3,
  
    isTree: true,
    expandOnHover: 700,
    startCollapsed: true
  });
  
  //The following has to be added, collapse/expand still doesn't work properly
  
  $('.mjs-nestedSortable-collapsed').on('click', function() {
    $(this).toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
  });
  
  $('.mjs-nestedSortable-expanded').on('click', function() {
    $(this).toggleClass('mjs-nestedSortable-expanded').toggleClass('mjs-nestedSortable-collapsed');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ol.sortable, ol.sortable ol {
   margin: 0 0 0 25px;
   padding: 0;
   list-style-type: none;
  }
  
  ol.sortable {
   margin: 4em 0;
  }
  
  .sortable li {
   margin: 5px 0 0 0;
   padding: 0;
  }
  
  .sortable li div {
   border: 1px solid #d4d4d4;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   border-color: #D4D4D4 #D4D4D4 #BCBCBC;
   padding: 6px;
   margin: 0;
   cursor: move;
   background: #f6f6f6;
   background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),
    color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
   background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
   background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
   background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
   background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
    endColorstr='#ededed', GradientType=0);
  }
  
  .sortable li.mjs-nestedSortable-branch div {
   background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #f0ece9 100%);
   background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #f0ece9 100%);
  }
  
  .sortable li.mjs-nestedSortable-leaf div {
   background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #bcccbc 100%);
   background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #bcccbc 100%);
  }
  
  .sortable li.mjs-nestedSortable-collapsed&gt;ol {
   display: none;
  }
  
  .sortable li.mjs-nestedSortable-branch&gt;div&gt;.disclose {
   display: inline-block;
  }
  
  .sortable li.mjs-nestedSortable-collapsed&gt;div&gt;.disclose&gt;span:before {
   content: '+ ';
  }
  
  .sortable li.mjs-nestedSortable-expanded&gt;div&gt;.disclose&gt;span:before {
   content: '- ';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.8.16/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/mjsarfatti/nestedSortable/master/jquery.mjs.nestedSortable.js"&gt;&lt;/script&gt;
  &lt;ol id="first" class="sortable ui-sortable"&gt;
    &lt;li id="list_4" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded"&gt;
      &lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Item 2&lt;/div&gt;
      &lt;ol&gt;
        &lt;li id="list_7" class="mjs-nestedSortable-branch mjs-nestedSortable-collapsed" style="display: list-item;"&gt;
          &lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 3.2&lt;/div&gt;
          &lt;ol&gt;
            &lt;li id="list_8" class="mjs-nestedSortable-leaf"&gt;
              &lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 3.2.1&lt;/div&gt;
            &lt;/li&gt;
          &lt;/ol&gt;
        &lt;/li&gt;
        &lt;li id="list_2" class="mjs-nestedSortable-leaf" style="display: list-item;"&gt;
          &lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 1.1&lt;/div&gt;
        &lt;/li&gt;
      &lt;/ol&gt;
    &lt;/li&gt;
    &lt;li id="list_1" class="mjs-nestedSortable-leaf" style="display: list-item;"&gt;
      &lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Item 1&lt;/div&gt;
  
    &lt;/li&gt;
    &lt;li id="list_3" class="mjs-nestedSortable-leaf" style="display: list-item;"&gt;
      &lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 1.2&lt;/div&gt;
    &lt;/li&gt;
    &lt;li id="list_5" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded"&gt;
      &lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Item 3&lt;/div&gt;
      &lt;ol&gt;
        &lt;li id="list_6" class="mjs-nestedSortable-no-nesting mjs-nestedSortable-leaf"&gt;
          &lt;div&gt;&lt;span class="disclose"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;Sub Item 3.1 (no nesting)&lt;/div&gt;
        &lt;/li&gt;
      &lt;/ol&gt;
    &lt;/li&gt;
  &lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>