Jquery slider -> How to traverse DOM correctly

My code:

<div id = "1">
    <h1>Heading 1</h1>
    <p class = "V">VVV</p>
    <ul>
        <li>line 1</li>
        <li>line 2</li>
    </ul>
    <p class = "A">AAA</p>
</div>

<div id = "2">
    <h1>Heading 2</h1>
    <p class = "V">VVV</p>
    <ul>
        <li>line 1</li>
        <li>line 2</li>
    </ul>
    <p class = "A">AAA</p>
</div>


$('ul').hide();
$('p.A').hide();
$('p.V').click(function(){
        $(this).next('ul').slideDown('slow');
        $(this).hide();
        $(this).closest('p.A').show(); // <-- How do I select 'p.A' in the current div?    
    });

http://jsfiddle.net/S8xcz/7/

This works great up until 'p.V' is hidden. From there, I need to display the 'p.A' (the 'up arrow').

How do I navigate to this?

I'm assuming t开发者_如何学JAVAhat hidden elements are still navigable - is this correct?

The closest method goes up the DOM tree to find an ancestor, you probably want to use nextAll('p.A').

http://jsfiddle.net/ambiguous/pWDth/

Or parent() and find(): $(this).parent().find('p.A').show();

http://jsfiddle.net/ambiguous/pWDth/1/

Or perhaps siblings: $(this).siblings('p.A').show();

http://jsfiddle.net/ambiguous/pWDth/2/

I'd probably use $(this).parent().find('p.A') as that's the least sensitive to how the HTML is arranged.

Replace

$(this).closest('p.A').show();

with

$(this).siblings('p.A:first').show();