Delay drop down

Delay drop down

Hi i am new to jquery. this is literally the first time ive tried to write it. I have three boxes with a button above each box. when someone clicks a button i want to script to make sure the heights of the other boxes are 0px then expand the select boxes height to 200px. Its working fine apart from its all happening simultaneously. I need a delay before the selected box expands, so it waits for the others to shrink to 0px first. My code looks like this:

$("#hidePanel").click(function() {
$("#panel2").animate({ marginTop: "0px" }, 500);
$("#colleft2").animate({ height: "0px", opacity: 0 }, 400);

$("#panel3").animate({ marginTop: "0px" }, 500);
$("#colleft3").animate({ height: "0px", opacity: 0 }, 400);

$("#panel").animate({ marginTop: "0px" }, 500);
$("#colleft").animate({ height: "200px", opacity: 1 }, 400);

 });


ive tried adding .delay like this:
$("#colleft").delay(200).animate({ height: "200px", opacity: 1 }, 400);
but this just stopped the box from expanding altogether. 

Id be really thankful if someone could help?