[jQuery] slide down and up problem

[evan]

Hi.

i just want my headers to slide up and down but they seem to execute
twice.  could someone look over my code to see why things are sliding
up down then up down again? thanks


code:

$(document).ready(function(){
   $("#subNav1 a").css({backgroundColor: "#fff", color: "#222" ,
borderRight: "2px solid #ccc" , borderLeft: "2px solid #ccc" ,
borderBottom: "2px solid #999"});
      $("#subNav2").click(function(){
          $(".subNavItem a").css({backgroundColor: "transparent",
color: "#fff" , borderRight: "none" , borderLeft: "none" ,
borderBottom: "none"});

          $(".headers").slideUp("fast", function(){
              $(".headers").hide();
              $("#header2").slideDown("slow");
          });
          $("#subNav2 a").css({backgroundColor: "#fff", color:
"#222" , borderRight: "2px solid #ccc" , borderLeft: "2px solid
#ccc" , borderBottom: "2px solid #999"});
          return false;
      });

      $("#subNav1").click(function(){
          $(".subNavItem a").css({backgroundColor: "transparent",
color: "#fff" , borderRight: "none" , borderLeft: "none" ,
borderBottom: "none"});

          $(".headers").slideUp("fast", function(){
              $(".headers").hide();
              $("#header").slideDown("slow");
          });
          $("#subNav1 a").css({backgroundColor: "#fff", color:
"#222" , borderRight: "2px solid #ccc" , borderLeft: "2px solid
#ccc" , borderBottom: "2px solid #999"});
          return false;
      });

      $("#subNav3").click(function(){
          $(".subNavItem a").css({backgroundColor: "transparent",
color: "#fff" , borderRight: "none" , borderLeft: "none" ,
borderBottom: "none"});

          $(".headers").slideUp("fast", function(){
              $(".headers").hide();
              $("#header3").slideDown("slow");
          });
          $("#subNav3 a").css({backgroundColor: "#fff", color:
"#222" , borderRight: "2px solid #ccc" , borderLeft: "2px solid
#ccc" , borderBottom: "2px solid #999"});
          return false;
      });