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="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="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

//open menu
		$('.country-btn-portugal').click(()=>{
	  $(".dropdowna").toggleClass('active'); 
	});
		$('.country-btn-uk').click(()=>{
	  $(".dropdownb").toggleClass('active'); 
	});
		$('.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
$(document).mouseup(function (e)
{
    var container = $("#oclick");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});