title: Toggle Unordered List Items with jQuery
body: <p>I'm in a project where non-HTML savvy users will be changing site content in WYSIWYG editors. One page involves an unordered list with a good amount of content. I'd like to be able to toggle the content, but I've run into an issue.</p>
  
  <p>Here's a jsfiddle recreating with my issue: <a href="http://jsfiddle.net/eKzbY/" rel="nofollow">http://jsfiddle.net/eKzbY/</a> </p>
  
  <p>And my javascript: </p>
  
  <pre><code>$(document).ready(function() {
      $('.descrip ul ul').hide();
      $('.descrip ul li').click(function() {
          $(this).children('.subLink').toggle('slow');
      });
      $('.descrip li:has(ul)').addClass('myLink');
      $('.descrip ul ul').addClass('subLink');
  });
  </code></pre>
  
  <p>You can toggle the content under "2" alright, but when you click "2.1" to toggle its content, it toggles both the content under it and the content under "2". I believe this is because clicking "2.1" hits both li's at the same time, toggling both. I'd give everything classes, but these users don't know HTML, so they'd likely struggle when adding more content.</p>
  
  <p>I've been staring at this for too long. Anyone have a solution/better idea?</p>