All divs back to default except for the active one jQuery

Okay, so here is my script.

When you click on a learn more button, it corresponds to that particular box and pulls down the right information accordingly.

I want to add a feature so when you click on ANOTHER learn more, and there is already a div open with information, it closes itself like the tail end of the toggle in this script.

Essentially, I don't want to have two learn more's open at the same time. If you choose one, then all the rest of them are closed. The way the page is setup, I can only have one open at a time.

$(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);
                                                                                                                       });
                                                             });
                                                                                                       });
                                                                                              });





                   });
   });

you can make it this way

$(".learn").click(function(){
    $(".learn").not(this).doSomeThing(/* some code */);
});

by this code you can exclude the current clicked item from the set

Pseudo code:

• Give all the relavent divs a special class name
• Separate your "close" function in the tail end of toggle out into a separate function, make it so it doesn't close divs with a class of "active"
• Setup a listener for clicking on learn mores that add the class "active" to the thing clicked then calls that close function for all (other) divs before doing its thing