title: Selecting the only the next sibling
body: <p>i've been reading a few solutions on this board and on others for selecting the next sibling, but i always have some kind of problem while using the code that is suggested.</p>
  
  <p>what i have is this </p>
  
  <pre><code>&lt;div class="article" id="onea"&gt;
           &lt;h1&gt;test2&lt;/h1&gt;
           &lt;p class="subtitle"&gt;ccccc&lt;/p&gt;
           &lt;p class="number"&gt;1a&lt;/p&gt;
           &lt;/div&gt;
  
  
           &lt;p class="detail"&gt;ddddd&lt;/p&gt;
  
  
  &lt;div class="article" id="oneb"&gt;
           &lt;h1&gt;test2&lt;/h1&gt;
           &lt;p class="subtitle"&gt;ccccc&lt;/p&gt;
           &lt;p class="number"&gt;1a&lt;/p&gt;
           &lt;/div&gt;
  
  
           &lt;p class="detail"&gt;ddddd&lt;/p&gt;
  </code></pre>
  
  <p>and what i want is that if i click a div.article that the articles are faded out and the next p.detail is faded in.</p>
  
  <p>i tried it with this</p>
  
  <pre><code>$('div.article').click(function() {
           $('div.article').fadeOut(450, function(){
           $(this).next('p.detail').fadeIn(750)
          });     
  
  });
  </code></pre>
  
  <p>but it always fades in all p.details not only the exact next p.detail</p>