how to find out in slide toggle function slide up and slide down using jquery

See more:

C#

ASP.NET

Javascript

jQuery

hii,
i implemented three slidetoggle function based on button click.
for example if user click button1 first div will open remaining will be hide.if user click second button div2 will open remaining will hide,third one work like same like earler


here my issue is when user click button1 div1 is open thats time button background color,again click same button div will hide that's it's take earlier color,inthis time button2,button3 also works same.

i am using this java script code

$("document").ready(function () {

      if ($("#HiddenField1").val() == "block") {
          $("#FiltersliderDiv").css("display", "none");

      }
      if ($("#HiddenField1").val() == "none") {
          $("#FiltersliderDiv").css("display", "block");
          $("#Filters").css('background-color', '#0082AA');
          $("#MapAndChart").css('background-color', '#0082AA');
          $("#Report").css('background-color', '#0082AA');
      }
      $("#filters").click(function () {



              $("#MapAndChartsliderDiv").slideUp("slow");
              $("#FiltersliderDiv").slideToggle("slow");
              $("#MapAndChartsliderDiv").slideUp("slow");
              $("#MapAndChart").css('background-color', 'Gray');
              $("#Filters").css('background-color', '#0082AA');
              $("#Filters").css('fontcolor', '#333333');
              $("#Report").css('background-color', 'Gray');

              document.getElementById("MapAndChart").style.color = "black";
              document.getElementById("Report").style.color = "black";
              document.getElementById("Filters").style.color = "White";



      });
  });

  $("document").ready(function () {
      var val1 = 0;
      if ($("#HiddenField2").val() == "block") {
          $("#MapAndChartsliderDiv").css("display", "none");
          $("#MapAndChart").css('background-color', 'Gray');
      }
      if ($("#HiddenField2").val() == "none") {
          $("#MapAndChartsliderDiv").css("display", "block");

      }
            }
    $("#MapAndChart").click(function () {



                      $("#FiltersliderDiv").slideUp("slow");
                      $("#ReportsliderDiv").slideUp("slow");
                      $("#MapAndChartsliderDiv").slideToggle("slow");
                      $("#MapAndChart").css('background-color', '#0082AA');
                      $("#Filters").css('background-color', 'Gray');
                      $("#Report").css('background-color', 'Gray');

                      document.getElementById("MapAndChart").style.color = "White";
                      document.getElementById("Report").style.color = "black";
                      document.getElementById("Filters").style.color = "black";

      });
  });
  $("document").ready(function () {

      if ($("#HiddenField3").val() == "block") {
          $("#ReportsliderDiv").css("display", "none");
          $("#Report").css('background-color', 'Gray');

      }
      if ($("#HiddenField3").val() == "none") {
          $("#ReportsliderDiv").css("display", "block");

      }
      $("#Report").click(function () {
          $("#FiltersliderDiv").slideUp("slow");
          $("#MapAndChartsliderDiv").slideUp("slow");
          $("#ReportsliderDiv").slideToggle("slow");
          $("#MapAndChart").css('background-color', 'Gray');
          $("#Filters").css('background-color', 'Gray');
          $("#Report").css('background-color', '#0082AA');

          document.getElementById("MapAndChart").style.color = "black";
          document.getElementById("Report").style.color = "White";
          document.getElementById("Filters").style.color = "black";
      });
  });