Targeting specific divs in jQuery

I am sure this is a pretty easy answer, but I have been pulling my hair out trying to get this thing to work.

What I'm trying to do is to create a learn more button on some text boxes. When you click on learn more, the box should expand do开发者_如何学JAVAwn and show more information.

Where I am running into trouble is actually making the learn more click function correspond to the specific text box that it's next to... It's expanding all of the text boxes and not the specific one I want.

There is also a functionality in there to animate the background with the color plugin.. I already have that working.. Just targeting the specific boxes is driving me crazy.

I can add the click function to .bind, but I can't use this to target anything.

$(document).ready(function(){
    var service = $(".service"), text = $(".service-text, h1.service-heading"); 

    $('.learn').bind({
    mouseenter: function() {
            $(service).animate({ backgroundColor: "#000000", }, 800);
            $(text).animate({ color: "#FFFFFF", }, 800);
        },
    mouseleave: function() {
            $(service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $(text).animate({ color: "#000000", }, 800);
        }
    });
});

UPDATE:

Here is the HTML I am using

<div class="service box-round">
<h1 class="service-heading">WEB DEVELOPMENT</h1>
    <div class="service-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="more-info">...Click for more info</span></div>
    <div class="more-text">More Text</div>
</div>
            <div class="learn"><span class="more">learn more</span><span class="less">learn less</span></div>

My thought was to use a hide and show function for the learn more and learn less.

$('.learn').bind({
mouseenter: function() {
            $(service).animate({ backgroundColor: "#000000", }, 800);
            $(text).animate({ color: "#FFFFFF", }, 800);
},
mouseleave: function() {
            $(service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $(text).animate({ color: "#000000", }, 800);
}  
});

this part can be changed to:

$('.learn').hover(function() {
    service.css({ backgroundColor: "#000000" });
    text.css({ color: "#FFFFFF" });
}, function() {
    service.css({ backgroundColor: "#000"});
    text.css({ color: "#FFFFFF" });
});

why i'm not using the animate - because jQuery without plugins can't animate the background and input text color

update:

I don't know if it's what you are looking for, but: http://jsfiddle.net/DJLZC/7/

You can try to let the "Learn more" button link to a hash reference that targets the specific div, and then use jQuery plugins to intercept the call and expand the targeted div.

An example would be to have a div like:

<div id="example-using-vars">
    <h3>Using Variables in ...</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

and then trigger it with a hyperlink like

<a href="#example-using-vars">Learn more</a>

$(document).ready(function(){
    $service = $(".service");
    $text = $(".service-text, h1.service-heading"); 

    $('.learn').bind({
    mouseenter: function() {
            $($service).animate({ backgroundColor: "#000000", }, 800);
            $($text).animate({ color: "#FFFFFF", }, 800);
        },
    mouseleave: function() {
            $($service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $($text).animate({ color: "#000000", }, 800);
        }
    });
});

Based on your description alone and not on the provided code, this is how I have implemented a "Show more" link to expand/reveal text areas before. This should give you the concept on how you would target the specific <div> as opposed to all of them.

HTML

<div class="details">
  Name: John Doe<br>
  Address: 123 Test Drive, Testville
  Postal Code: A1A 1A1
</div>
<a class="detailLink" href="#">Show/Hide Details...</a> 

jQuery

$(function() {  
    $('.detailLink').click(function() {
        $(this).prev('.details').toggle('medium');
        return false;
    });
 });

So the idea is to use the actual "Learn more" link as your launch point, then use jQuery's tree traversal features to toggle the visibility of the immediately preceding details <div>.