jQuery addClass example

Change class name on click in jQuery

HTML

<br>		
    <br>scroll down to see both divs and click both.
    <br>
    <br>
    1. Does not close if you click body. 2. Does not close other menu.
    3. close menu if menu item is clicked
    <br>
    <br>
    <br>
    <div class="cc-btn">			
			<button class="tablabel country-btn-portugal" id="portimg"></button>     
			<div id="mcontainera" class="dropdowna dpd">
				<a id="mclose1" class="mclose" href="#home">Overview</a>
				<a id="mclose2" href="#about">Application Process</a>
				<a id="mclose3" href="#contact">Investment Options</a>
			</div>
		</div>   
    <br>
    <br>
    <br>		
    <br>		
    <br>
    <div class="cc-btn">			
			<button class="tablabel country-btn-uk" id="portimg"></button>     
			<div id="mcontainer2" class="dropdownb dpd">
				<a id="mclose4" class="mclose" href="#home">Overview</a>
				<a id="mclose5" href="#about">Application Process</a>
				<a id="mclose6" href="#contact">Investment Options</a>
			</div>
		</div>

CSS

body {background:#aaa;}
.cc-btn {width:100%; height:4em;}

.dropdowna, .dropdownb {
  z-index: 100;
  display:none;
  transition: opacity 400ms ease-out; 
  opacity:0;
    top:-49px;
  left:-1.5em;
  width:11em;
  height:6.5em;
}
.dropdowna.active, .dropdownb.active {
  opacity:1;
  display:block;
  transform: translate(0, -100%);
  position:relative;
  top:-49px;
  left:-1.5em;
  width:11em;
  height:6.5em;
}
  
  


.dropdowna a, .dropdownb a {
    color: white;
    padding-top:14px;
    text-decoration: none;
    display: block;
    text-align:center;
}
#mcontainer {
  border-radius:12px;
  background-color: rgba(0,0,0,0.9);
  box-shadow: 0px 8px 16px 0px rgba(225,225,225,.3);
    z-index: 99999;
    padding:5px 5px 5px 5px;

}
.dropdown a:hover {background-color: rgba(0,0,0,0,0.4)}

.tablabel {
    background: rgba(0, 0, 0, .9);
    border: 1px solid #fff;
    color: #fff !important;
    height: 44px;
    width: 128px;
    -webkit-transition: ease-out 0.3s;
    -moz-transition: ease-out .3s;
    transition: ease-out .3s;
    transform: translate3d(0, 0, 0);
    font-size: 1em;
    cursor:pointer;

}

.tablabel:hover {
    color: transparent !important;

}

#portimg {
    background: url("http://ahimsainvestments.com/images/flags/portugal-flag.png");
    background-position: center 50%;
    background-size: 10em;
    transform: translate3d(0, 0, 0);
    height: 44px;
    width: 128px;
    color: #fff !important;
    line-height: 20px;   
}
#portimg:hover{
    background: none;
}
    
#portimg:hover::after {
    content: 'PORTUGAL';
    color: #fff !important;     
}

JavaScript

//open menu
		$('.tablabel').click(function(event){
      $('.tablabel').not(this).next().removeClass("active")
       $(this).next().toggleClass("active")
	     
	});
	 
	//close if menu clicked
	$(".dpd").click(function(e){
  
    $(this).toggleClass("active")
  })

	//close if anything  but menu clicked