Question

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 down 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.

Answer 1

$('.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/