Prevent all references of class to be affected by firing function

How could I only affect the + READ BIO DIV I click and toggle the P.bio class underneath, but not every instance on the page? I'd appreciate the help. Thanks!

HTML:

<div class="bio-link"></div><p class="bio">This is a bio #1</p>
<div class="bio-link"></div><p class="bio">This is a bio #2</p>

jQuery:

//Bio Toggle
closebio = "- CLOSE BIO";
showbio = "+ READ BIO"
$(".bio-link").html(showbio);
$(".bio").hide();
$(".bio-link").click(function() {
    if ($(".bio").is(":hidden")) {
        $(".bio:hidden").fadeIn();
        $(".bio-link").html(clos开发者_Python百科ebio);
    } else {
        $(".bio").fadeOut();
        $(".bio-link").html(showbio);
    }
});

---

Use .toggle() and $(this), like so:

    $(function(){
     //Bio Toggle
     closebio = "- CLOSE BIO";
     showbio = "+ READ BIO"
     $(".bio-link").html(showbio);
     $(".bio").hide();
     $(".bio-link").toggle(function() {
         $(this).html(closebio).next('.bio').fadeIn();
     },function(){    
         $(this).html(showbio).next('.bio').fadeOut();
     });      
    })

See http://jsfiddle.net/MBMef/1/

---

You could use jQuery's .next() selector; $(this).next().fadeIn();

---

This works:

$(".bio-link").click(function() {
    var bio = $(this).next('p');
    if (bio.is(":hidden")) {
        bio.fadeIn();
        $(this).html(closebio);
    } else {
        bio.fadeOut();
        $(this).html(showbio);
    }
});

http://jsfiddle.net/dxVNx/1/

And also, you should declare your HTML close/show variables with the var keyword, and without the missing semicolon (just for good measure/practice).

var closebio = "- CLOSE BIO";
var showbio = "+ READ BIO";