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="mcontainer" class="dropdown dropdowna">
				<a id="mclose" class="mclose" href="#home">Overview</a>
				<a id="mclose" href="#about">Application Process</a>
				<a id="mclose" 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="mcontainer" class="dropdown dropdownb">
				<a id="mclose" class="mclose" href="#home">Overview</a>
				<a id="mclose" href="#about">Application Process</a>
				<a id="mclose" 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

function fnClick(e){
	var $dd = $(this).next();
 console.log($dd, this); 
  $('.dropdown').not($dd).removeClass('active');
  $dd.toggleClass('active');
}

	//open menu
		$('.country-btn-portugal').click(fnClick);
		$('.country-btn-uk').click(fnClick);
    
		$('.country-btn-cyprus').click(()=>{
	  $(".dropdownc").toggleClass('active'); 
	});
		$('.country-btn-spain').click(()=>{
	  $(".dropdownd").toggleClass('active'); 
	});
		$('.country-btn-cyprusa').click(()=>{
	  $(".dropdowne").toggleClass('active'); 
	});
		$('.country-btn-stkitts').click(()=>{
	  $(".dropdownf").toggleClass('active'); 
	});
		$('.country-btn-dominica').click(()=>{
	  $(".dropdowng").toggleClass('active'); 
	});
	//close if menu clicked
	$('#mclose').click(()=>{ 
	  $('.dropdown').removeClass('active');
	});

	//close if anything  but menu clicked