Here's the plan for my script:
Once a user clicks on a "learn more" button, it will reveal the relevant information in the corresponding box.
I'm aiming to implement a feature where if you click on another "learn more" button while one box is already open, the first box automatically closes. This way, only one box can be open at a time on the page.
$(document).ready(function(){
var service = $(".service"), text = $(".service-text, h1.service-heading"), moretext = $(".more-text");
$(".learn").toggle(
function()
{
$(this).parent().find(service).animate({ backgroundColor : "#000000" }, 800);
$(this).animate({ backgroundColor : "#FFFFFF" }, 800);
$(this).parent().find(text).animate({ color: "#FFF"}, 800);
$(this).parent().find("span.more").animate({ color : "#000000" }, 800, function () {
$(this).parent().parent().find(".service").animate({ height : "500px"}, 800, function () {
$(this).find(moretext).show().animate({ color: "#FFFFFF"}, 800);
$(this).parent().find("span.more").animate({ color : "#FFF"}, 800, function () {
$(this).hide();
$(this).parent().find("span.less").show( function () {
$(this).animate({ color: "#000000"}, 800);
});
});
});
});
},
function()
{
$(this).parent().find(service).animate({ backgroundColor : "#FFFFFF" }, 800, function () {
$(moretext).animate({ color: "#FFFFFF"}, 800, function () {
$(this).hide();
});
});
$(this).animate({ backgroundColor : "#000000" }, 800);
$(this).parent().find(text).animate({ color: "#000000"}, 800);
$(this).parent().find("span.less").animate({ color: "#FFFFFF"}, 800, function() {
$(this).parent().parent().find(service).animate({ height: "180px"}, 800, function () {
$(this).parent().find("span.less").animate({ color: "#000000"}, 800, function () {
$(this).hide();
$(this).parent().find("span.more").show( function () {
$(this).animate({ color: "#FFFFFF"}, 800);
});
});
});
});
});
});