CODEWITHSUNDEEP
javascriptjquery
UserIsCorrupt
UserIsCorrupt

Reputation: 5025

Affect another element in current outer element

<div class="test">
 <button>Example</button>
 <div class="example" style="display:none;">Blah</div>
</div>

<div class="test">
 <button>Example</button>
 <div class="example" style="display:none;">Another</div>
</div>

When button gets clicked, I want .example to .show, but only the .example that's in the current .test.

Upvotes: 0

Views: 42

Answers (3)

Tats_innit
Tats_innit

Reputation: 34107

Hiya Working demo for your case here: http://jsfiddle.net/4bLZF/

this uses slideToggle http://api.jquery.com/slideToggle/

code

  $(document).ready(function () {

    // Watch for clicks on the "slide" link.
    $('button').click(function () {
        $(this).next(".example").slideToggle(400);
        return false;
    });


});​

Upvotes: 0

jfriend00
jfriend00

Reputation: 707326

Another way that works for your particular HTML:

$('button').click(function(){
    $(this).next('.example').show();
});

Upvotes: 3

bfavaretto
bfavaretto

Reputation: 71918

This will do exactly what you said:

$('button').click(function(){
    $(this).closest('.test').find('.example').show();
});

This works too for the markup you posted, but it won't work if the button and .example are not siblings:

$('button').click(function(){
    $(this).siblings('.example').show();
});

Upvotes: 1

Related Questions