JQuery :: Finishing An Animation Before Another Can Start?

I have a page on a site that features a list with clickable items in it. When one item is clicked, a div slides down that displays another div with more clickable items. What I am finding is that when I click on two items in the first div quickly, two divs drop down and clutter up the space on the site forcing everything else on the page downward.

$('#cars').click(function () {$("li").removeClass("active_class");
$("#cars").addClass("active_class");
$(".car_type").hide();
$("#cars_div").slideDown("slow");

[Code]..

So basically, the <li> with the id of "cars" removes any active class from the list items, adds the class to the currently selected <li> hides the .car_type and slides down the matching #cars_div. If I click on "cars" and "trucks" quickly, both divs with the class car_type are displayed at the same time.

Is there an easier way to complete all these tasks while toggling between the div that is displayed so only one shows at a time?