title: jQuery - How to select child elements of parent?
body: <p>Sorry if the title is not accurate - I couldn't figure out how to word it.</p>
  
  <p>I have multiple widgets with the same class <code>&lt;div class="widget"&gt;&lt;/div&gt;</code> - each widget has a title, and content, structured like this:</p>
  
  <pre><code>&lt;div class="widget"&gt;
      &lt;div class="widget-title"&gt;Title&lt;/div&gt;
      &lt;div class="widget-content"&gt;Content Here&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The "widget-content" is hidden, and when you click on the widget-title, the content appears, and a class is applied to the widget-title, changing it to "widget-title open".  This part works find, and the widget-content opens too.</p>
  
  <p>The problem is, its opening the widget content on ALL widgets. It should only open the widget-content in the specific widget where the title was clicked, not ALL of them.  I am not sure what the proper syntax is to use so it only opens the widget-content of the specific widget the user click the title on.</p>
  
  <p>Here is the code I have so far:</p>
  
  <pre><code>$('.widget').find('.widget-title').click(function() {
    $('.widget-content').show('slow', function() {
      // Animation complete.
    });
    $('.widget').find('.widget-title').addClass("open");
  });
  </code></pre>
  
  <p>Could someone please provide a working example?  Thanks</p>