按钮边框与jQuery

Question

I have a button under white background with gray border, when clicking button it will slidedown menu.

When person clicked button, it will change button bottom border to white and slidedown menu, if person click from menu it will slide up and the button bottom border will change color to red.

I'm trying to solve in button alone, if person did NOT click inside of drop menu while button showing white bottom border, but clicked again ON the button to slide up, after slide up i want to change button bottom border to gray.

here is code...

this what does do is when click button it will change button bottom border to transparent and slidedown menu.

$(document).ready(function(){
            $(".dropdown dt a").click(function() {
                $(this).css('border-bottom', 'solid 1px transparent' );
                $(".dropdown dd #md").slideToggle();
                });

this what does do is when click button it will change button bottom border to transparent and slidedown menu, and when click one of option from INSIDE of menu it will slide up and change bottom border button to blue.

$(".dropdown dd ul li a").click(function() {

          var text = $(this).html();
          $(".dropdown dt a span").html(text);
          $(".dropdown dd #md").slideUp();
    $('.dropdown dt a').css('border-bottom', 'solid 1px blue' );
          });

this what does do is when click button it will change button bottom border to transparent and slidedown menu, and when click one of option from OUTSIDE of menu area it will slide up and change bottom border button to blue.

$(document).bind('click', function(e) {

          var $clicked = $(e.target);
          if (! $clicked.parents().hasClass("dropdown"))
          $(".dropdown dd #md").slideUp();    
     $('.dropdown dt a').css('border-bottom', 'solid 1px blue' );

          });

does anyone can help me how can i write code if person click again from button to slideup menu and CHANGE BOTTOM BORDER BOTTOM TO GRAY!

THANKS.

Answer 1

http://api.jquery.com/slideToggle/

http://api.jquery.com/toggleClass/

CSS

.active{
    border-bottom:solid 1px blue;
}

js

$(document).bind('click', function (e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd #md").slideToggle();
    $('.dropdown dt a').toggleClass('active');
});