【新手请教】伸缩菜单，点击的背景色改变，其他的回到默认。

想实现点击其中的一个步骤，步骤的标题和内容背景色改变，然后别的步骤自己回到原来的颜色。不知道怎么弄。。只能写成那样了。。帮帮忙<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.holder{width:100%; height:auto; clear:both;}
.menu_body{ margin:0px; padding:0px;} 
.searchlist_outside{ width:100%; height:65px; border-bottom:1px dashed #ccc;float:left; color:#666;background:#999; margin:0px;}
.menu_head{background:red;  cursor:pointer; color:#FFF; margin:0px;}
.bgRed{ background:red; color:#F60; border:1px solid #feffef;}
.bgBlue{ background:#06F;border:1px solid #e2dfcc; color:#333; }
#tripcont2{ display:none;}
#tripcont3{ display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript" language="javascript">$(function(){   
         
 $("p.menu_head").click(function()   
          {   
              $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");              
          });   
           $("p.menu_head").click(function()   
           {   
   if ($(this).hasClass("bgRed")) $(this).removeClass("bgRed").addClass("bgBlue");
        else $(this).removeClass("bgBlue").addClass("bgRed");
           });   
           
        });  
</script>
</head>
<body> 
      <div style="width:700px; overflow:hidden;">
         <div class="holder">
            <p class="menu_head bgRed" id="triptit1" >步骤1:</p> 
            <div class="menu_body" id="tripcont1">
                <div class="searchlist_outside"></div>
            </div>  
            <p class="menu_head" id="triptit2">步骤2:</p> 
            <div class="menu_body" id="tripcont2">
             <div class="searchlist_outside"></div>  
            </div>  
            <p class="menu_head" id="triptit3">步骤3</p> 
            <div class="menu_body" id="tripcont2">
                <div class="searchlist_outside"></div> 
            </div>  
        </div>
    </div>    
</body>
</html>