title: Parent item toggles child item as well
body: <p>I have this sortable item list using Jquery UI Sortable, which is also able to nest items.</p>
  
  <p>Each of these items contains toggable content, it will slide down when clicking on an item. However, when clicking on the parent item when nested, instead of only toggling the parent content it's also toggling the child's content.</p>
  
  <p>I've been trying to figure it out in my Jquery script but haven't been able to figure it out.. I reproduced my issue in this fiddle:</p>
  
  <p><a href="https://jsfiddle.net/es3hbdnm/32/" rel="nofollow noreferrer">https://jsfiddle.net/es3hbdnm/32/</a></p>
  
  <p>Also HTML:</p>
  
  <pre><code>&lt;ol class="sortable panel-group"&gt;
    &lt;li class="panel panel-default"&gt;
      &lt;div class="toggle"&gt;Home&lt;/div&gt;
      &lt;div class="panel-content"&gt;Hidden content&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="panel panel-default"&gt;
      &lt;div class="toggle"&gt;About us&lt;/div&gt;
      &lt;div class="panel-content"&gt;Hidden content&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="panel panel-default"&gt;
      &lt;div class="toggle"&gt;Contact&lt;/div&gt;
      &lt;div class="panel-content"&gt;Hidden content&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>My JS:</p>
  
  <pre><code>$(document).ready(function () {
  
  $('.sortable').nestedSortable({
    handle: 'div',
    items: 'li',
    toleranceElement: '&gt; div'
  });
  
  
    $(".panel-default").click(function () {
      event.stopImmediatePropagation();
      $(".panel-content").not($(this)).slideUp();
  
      $(this).find(".panel-content").slideDown();
    });
  
  });
  </code></pre>