JQuery: Selector only selects first class
<p>I'm trying to select classes that can appear multiple times, but JQuery only selects the first instance.</p>

<p>JQuery</p>

<pre><code>$(function(){
$(".openNews").click(function() {
    alert("click");

    $(this).parent().find('.newsContent').toggleClass("newsContent-expand");
    $(this).parent().toggleClass("newsItem-expand");
});
});
</code></pre>

<p>HTML (there can be many of these newsItem divs, all wrapped in one main container)</p>

<pre><code>&lt;div class="newsItem"&gt;
     &lt;div class="openNews"&gt;G&lt;/div&gt;
     &lt;div class="newsHeadline"&gt;
          &lt;span class="headline"&gt;The other thing&lt;/span&gt;
          &lt;span class="author"&gt;by: author&lt;/span&gt;
          &lt;span class="time"&gt;12/07/2012 @ 12:57 pm&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class="newsContent"&gt;
        sdf&lt;br&gt;
        sdf&lt;br&gt;
        sdf&lt;br&gt;
        sdfdsfsdfsdfsd&lt;br&gt;
        sdfsdf sdf                   
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The alert is there just for troubleshooting.</p>

<p>Clicking the 'G' should trigger the transition, but this only works for the first newsItem. All subsequent newsItems do nothing when clicking on 'G', unless the item above it has already transitioned.</p>

<p>I can get it to work just fine if I watch for a click on newsHeadline instead, but that leads to issues where clicking on a newsHeadline causes one above it to transition instead, or you have to hunt around for the clickable part (wouldn't see a click on the headline text, for instance). </p>

<p>I feel like I'm missing something simple. Any ideas?</p>
