Selecting the only the next sibling

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.

what i have is this

<div class="article" id="onea">
         <h1>test2</h1>
         <p class="subtitle">ccccc</p>
         <p class="number">1a</p>
         </div>


         <p class="detail">ddddd</p>


<div class="article" id="oneb">
         <h1>test2</h1>
         <p class="subtitle">ccccc</p>
         <p class="number">1a</p>
         </div>


         <p class="detail">ddddd</p&g开发者_如何学Got;

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.

i tried it with this

$('div.article').click(function() {
         $('div.article').fadeOut(450, function(){
         $(this).next('p.detail').fadeIn(750)
        });     

});

but it always fades in all p.details not only the exact next p.detail

Don't put your fadeIn in the callback in your fadeOut. $(this) will then be reffering to all div.article and therefore fade in all details.

$('div.article').click(function() {
     $('div.article').fadeOut(450);
     $(this).next('p.detail').fadeIn(750);
});

Working example: http://jsfiddle.net/24GpH/

Or if you want to let the fadeIn of the article-detail happen after the fadeOut you need to create a variable which hold the actually clicked element like this:

$('div.article').click(function() {
    clicked_div = $(this);
    $('div.article').fadeOut(450, function() {
        clicked_div.next('p.detail').fadeIn(750);
    });
});

Working example: http://jsfiddle.net/24GpH/1/